Nuxt.js ile proje geliştirirken backend tarafını eğer bir API ile geliştirdiysek ve ona uygun şekilde nuxt.config.js içinde gerkeli değişikliği yaptıysak Axios ile otomatik yetkilendirilmiş request gönderebiliyoruz. Eğer yetkilendirme işleminin üstünden bir miktar zaman geçtiyse ve elimizdeki token’ın backend tarafındaki kullanım süresi dolduysa sunucu tarafından 401 Unauthorized cevabı döner. Bu durumda nasıl bir işlem yapılacağı yazılımcının kararına kalmıştır. İsterse öylece hatalı şekilde bırakır (ve sonrasında kovulur :)) isterse de hata çıkmaması için ve başka sıkıntılara yol açmaması için gerekli önlemi alır.
Ben küçük projelerimde eğer backend tarafından 401 cevabı gelirse aşağıdaki kod ile oturumunu sonlandırıp giriş sayfasına yönlendiriyorum. Küçük projelerinizde siz de aynı işlemleri yapabilir veya geliştirip daha kaliteli bir çözüm uygulayabilirsiniz.
Bunun için plugins klasöründe Axios.js adında bir dosya oluşturun. Ardından nuxt.config.js içindeki plugins dizisine aşağıdaki gibi ekleme yapın.
|
1 2 3 |
plugins: [ { src: '@/plugins/Axios' }, ], |
Axios.js içeriğine bu kodları ekleyin.
Not: Mesaj vermek için Sweet Alert paketini kullanıyor. Hata vermemesi için ya gerekli bağımlılığı ekleyin ya da farklı bir şekilde mesaj verin.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
function forceLogoutFor401(app){ Swal.fire({ title: "Oturum sonlandırıldı !", html: "Uzun süre işlem yapılmadığı için oturumunuz sonlandırılmıştır.<br/>5 saniye içerisinde giriş sayfasına yönlendirileceksiniz.", type: "info", confirmButtonText: 'Anladım', timer: 5000 }).then((result) => { app.$auth.logout() }); } export default function ({ $axios, app, store, redirect }) { // Normalde Axios genelinde herhangi bir yerde hata oldunca burası çalışır. Örnek: Syntax $axios.onError(error => { if (error.response) { // Ama burada da 401 kodunu yakalayabiliriz. if(error.response.status === 401) { // NOT : Burası tek fonksiyon ile yazılabilir if (error.response) { if(error.response.status === 401) { if( // Siz kendi yönteminizle oturumun var olup olmadığını burada kontrol edin store.getters['Auth/getIsLoggedIn'] && app.$auth.strategy.options.endpoints.logout.url !== error.response.config.url // Çıkış yaptıktan sonra logout rotasından gelen 401 sonucuna göre bir daha çıkış yapmaya çalışması engellendi. ){ forceLogoutFor401(app, redirect); } } } } } return Promise.reject(error) }) $axios.onRequest(() => {}) $axios.interceptors.response.use( // Eğer request sonucunda gelen response 200 ise normal çalışmaya devam etsin.. (response) => { return response }, (error) => { // Eğer bir hata varsa.. if (error.response) { // ve o hata 401 koduyla geldiyse.. if(error.response.status === 401) { if( store.getters['Auth/getIsLoggedIn'] && app.$auth.strategy.options.endpoints.logout.url !== error.response.config.url // Çıkış yaptıktan sonra logout rotasından gelen 401 sonucuna göre bir daha çıkış yapmaya çalışması engellendi. ){ forceLogoutFor401(app, redirect); } } } return Promise.reject(error); } ) } |
Kod çok basit ama küçük projeler için yeterli durumda.
Herhangi bir sorunuz olursa yorum yoluyla ulaşabilirsiniz.
Faydalı olması dileğiyle..
Güzel yazınız için teşekkürler. İşimi fazlasıyla gördü. Sağlıcakla kalın…
İşinize yaramasına sevindim. Siz de sağlıcakla kalın..