Nuxt 3 token süresini yönetme

aghabalaguluzade · 3 Eyl 2024

Nuxt 3 de tokenin süresi dolduğunda kullanıcıyı logout yapmak istiyorum fakat bir türlü yapamadım.
Axios ile yaptım:

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    console.log(error, "ERRRORR");
    if (error.response && error.response.status === 401) {
      toast.error("Your token has expired, forwarding login page", {
        position: "top-right",
        timeout: 3000,
        closeButton: "button",
        icon: true,
        rtl: false,
      });

      setTimeout(() => {
        authStore.logout();
        router.push("/login");
      }, 3000);
    }
    return Promise.reject(error);
  }
);

olmadı.

export default defineNuxtPlugin(nuxtApp => {
  // Global error handler
  nuxtApp.provide('handleError', (error) => {
    if (error.response?.status === 401) {
      // Show Toast or Notification
      nuxtApp.$toast.error('Token expired, redirecting to login...');
      setTimeout(() => {
        // Handle logout
        nuxtApp.$auth.logout();
        // Redirect to login
        nuxtApp.$router.push('/login');
      }, 3000);
    }
  });
});

böyle yaptım olmadı. Yardımcı olursanız sevinirim.

Aaeneas · 3 Eyl 2024

bunu denermisin

 $axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    console.log(error, "ERROR");
    if (error.response && error.response.status === 401) {
      toast.error("Your token has expired, redirecting to login page", {
        position: "top-right",
        timeout: 3000,
        closeButton: "button",
        icon: true,
        rtl: false,
      });
      setTimeout(() => {
        authStore.logout();
        router.push("/login");
      }, 3000);
    }
    return Promise.reject(error);
  }
);

Kkursatcanciger · 3 Eyl 2024

Herhangi bir hata vs alıyor musunuz?

aghabalaguluzade · 3 Eyl 2024

aeneas hayır $axios is not defined hatası alıyorum

aghabalaguluzade · 3 Eyl 2024

kursatcanciger çalıştıramadım o yüzden hata da yok

aghabalaguluzade · 3 Eyl 2024

aghabalaguluzade aslında ben nuxt 3 ün kendi hookları ile yapmak istiyordum fakat yapamayınca axios ile yapayım dedim fakat oda çalışmıyor

Kkursatcanciger · 3 Eyl 2024

console.log(error, "ERRRORR"); çıktısını alabiliyor musunuz? Eğer request sonucunda hata alıyorsanız ve konsolda bu çıktıyı göremiyorsanız, muhtemelen axios interceptors çalışmamıştır. React tarafında ben şu şekilde kullanıyorum;

Önce bir axios instance oluşturuyorum.

import Axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'api-base-url',
  headers: { 'Content-Type': 'application/json' }
});

Daha sonra interceptor response ile hatayı yakalıyor ve oturumu sonlandırıyorum.

axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response && error.response.status === 401) {
      // Oturumu kapatma ve login sayfasına yönlendirme işlemlerini burada yapıyorum.
    }
    Promise.reject(error);
  }
);

Daha sonra oluşturduğum instance export ederek, kullanmak istediğim yerlerde axios paketi yerine oluşturduğum instance kullanıyorum.

export default axiosInstance;

import axiosInstance from './helpers/axios';

axiosInstance.post('/users', {
  // data
});

Böyleye response eğer 401 hata kodu içeriyorsa kullanıcı oturumunu sonlandırabiliyorum.

Kodları çalışan bir projeden almadığım için eksik veya hatalı olabilir, sadece react tarafında nasıl bir mantıkla yaptığımı göstermek istedim. Belki nuxt ve vue taraflarında da buna benzer bir şekilde yapılıyordur.

aghabalaguluzade · 3 Eyl 2024

AXIOS ÇÖZÜLDÜ

plugins/axios.ts

import axios from 'axios';
import { useAuthStore } from '~/store/authStore';
import { useRouter } from 'vue-router';
import { useToast } from 'vue-toastification';

export default defineNuxtPlugin(nuxtApp => {
   const authStore = useAuthStore();
   const router = useRouter();
   const toast = useToast();

   axios.interceptors.response.use(
      response => response,
      error => {
         if (error.response && error.response.status === 401) {
            toast.error('Your token has expired, redirecting to login page', {
               position: 'top-right',
               timeout: 3000,
               closeButton: 'button',
               icon: true,
               rtl: false,
            });

            authStore.logout();
            router.push('/login');
         }
         return Promise.reject(error);
      }
   );

   nuxtApp.provide('axios', axios);
});

store/userStore.ts

async updateUserDetails(updatedUserData: Book) {
      const authStore = useAuthStore();
      const config = useRuntimeConfig();
      const { $axios } = useNuxtApp();
      try {
        const data = await $axios.put(`${config.public.apiBaseUrl}/user/updateUser`, {
          method: 'PUT',
          body: JSON.stringify(updatedUserData),
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${authStore.token}`
          }
        });

        return data;

      } catch (error) {
        throw error.data;
      }
    },

böyle yaparak çözdüm.

Fakat ben Nuxt 3 ün kendi hooklarını kullanarak da bunu yapmak istiyorum nasıl yapabilirim acaba.

mgsmus · 3 Eyl 2024

aghabalaguluzade https://nuxt.com/docs/guide/recipes/custom-usefetch

aghabalaguluzade · 3 Eyl 2024

mgsmus teşekkür ederim canım hocam umarım iyisinizdir keyfiniz yerindedir.

Nuxt 3 kendi hookları ile de böyle çözüm

plugins/api.ts

import { useAuthStore } from '~/store/authStore';
import { useToast } from 'vue-toastification';

export default defineNuxtPlugin((nuxtApp) => {
   const authStore = useAuthStore();
   const config = useRuntimeConfig();
   const api = $fetch.create({
      baseURL: `${config.public.apiBaseUrl}`,
      onRequest({ request, options, error }) {
         if (authStore.token) {
            const headers = options.headers ||= {}
            if (Array.isArray(headers)) {
               headers.push(['Authorization', `Bearer ${authStore.token}`])
            } else if (headers instanceof Headers) {
               headers.set('Authorization', `Bearer ${authStore.token}`)
            } else {
               headers.Authorization = `Bearer ${authStore.token}`
            }
         }
      },
      async onResponseError({ response }) {
         if (response.status === 401) {
            const toast = useToast();

            toast.error('Your token has expired, redirecting to login page', {
               position: 'top-right',
               timeout: 3000,
               closeButton: 'button',
               icon: true,
               rtl: false,
            });

            authStore.logout();
            await nuxtApp.runWithContext(() => navigateTo('/login'))
         }
      }
   })

   return {
      provide: {
         api
      }
   }
})

store/userStore.ts

import { defineStore } from 'pinia'
import { useAuthStore } from './authStore';
import type { Book } from '~/types';

export const useUserStore = defineStore({
  id: 'UserStore',
  state: () => ({}),
  actions: {
    async updateUserDetails(updatedUserData: Book) {
      const authStore = useAuthStore();
      const config = useRuntimeConfig();
      const { $api } = useNuxtApp()
      try {
        const data = await $api(`${config.public.apiBaseUrl}/user/updateUser`, {
          method: 'PUT',
          body: JSON.stringify(updatedUserData),
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${authStore.token}`
          }
        });

        return data;

      } catch (error) {
        throw error.data;
      }
    },
  },
})