jwt token in cookie, no more duplicate requests

src/App.vue

@@ -13,6 +13,7 @@
   const { isAuth,userInfo,logout } = useAuth();
   
   const getMenuItems = () =>{
+    console.log(isAuth.value)
     if(isAuth.value){
       return [
         {
@@ -52,11 +53,6 @@
       ];
       } else {
           return [
-          {
-            label: 'Accueil',
-            command:() => router.push({name:'home'}),
-            icon: 'pi pi-home',
-          },
           {
             label:'Register/Login',
             command:() => router.push({name:'login'}),

src/api.js

@@ -9,99 +9,115 @@ const api = axios.create({
 
 export const createUser = async (userData) => {
     const response = await api.post('/users', userData);
-    const { access, refresh } = response.data;
+    const accessToken = response.data.access;
 
-    Cookies.set('refresh', refresh,{
+    Cookies.set('access_token', accessToken,{
         expires: 1,
         secure: true,
         sameSite: 'strict',
     });
-    sessionStorage.setItem('access_token', access);
     return response.data
 };
 
 export const loginUser = async (userData) => {
     const response = await api.post('/token/', userData);
-    const { access, refresh } = response.data;
+    const accessToken = response.data.access;
-
+    Cookies.set('access_token', accessToken,{
-    Cookies.set('refresh', refresh,{
         expires: 1,
         secure: true,
         sameSite: 'strict',
     });
-    sessionStorage.setItem('access_token', access);
     return response.data;
 };
 
 export const updateUser = async (userData) => {
+    const cookie = verifyCookie();
     const response = await api.put('/users/me/', userData, {
-        headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},
+        headers: {Authorization: `Bearer ${cookie}`},
     });
     return response.data;
 }
 export const getuserinfo = async () => {
+    const cookie = verifyCookie();
     const response = await api.get('/users/me/', {
-        headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},
+        headers: {Authorization: `Bearer ${cookie}`},
     });
     return response.data;
 };
 
 export const createProduct = async (productData) => {
+    const cookie = verifyCookie();
     const response = await api.post('/products/', productData, {
-        headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},
+        headers: {Authorization: `Bearer ${cookie}`},
 });
     return response.data;
 };
 
 export const  getProducts = async () => {
+  const cookie = verifyCookie();
   const response = await api.get('/products/', {
-      headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},
+      headers: {Authorization: `Bearer ${cookie}`},
 });
   return response.data;
 };
 
 export const modifyProduct = async (productData, id) => {
+  const cookie = verifyCookie();
   const response = await api.patch(`/products/${id}/`, productData, {
-      headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},
+      headers: {Authorization: `Bearer ${cookie}`},
 });
 return response.data;
 };
 
 export const deleteProduct = async (id) => {
+  const cookie = verifyCookie();
   const response = await api.delete(`/products/${id}/`, {
-      headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},
+      headers: {Authorization: `Bearer ${cookie}`},
 });
 return response.data;
 };
 
 export const getWarehouses = async () => {
+  const cookie = verifyCookie();
   const response = await api.get('/warehouses/', {
-      headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},
+      headers: {Authorization: `Bearer ${cookie}`},
 });
   return response.data;
 };
 
 export const createWarehouse = async (warehouseData) => {
+  const cookie = verifyCookie();
   const response = await api.post('/warehouses/', warehouseData, {
-      headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},
+      headers: {Authorization: `Bearer ${cookie}`},
 });
   return response.data;
 }
 
 export const modifyWarehouse = async (warehouseData, id) => {
+  const cookie = verifyCookie();
   const response = await api.patch(`/warehouses/${id}/`, warehouseData, {
-      headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},
+      headers: {Authorization: `Bearer ${cookie}`},
 });
   return response.data;
 };
 
 export const deleteWarehouse = async (id) => {
+  const cookie = verifyCookie();
   const response = await api.delete(`/warehouses/${id}/`, {
-      headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},
+      headers: {Authorization: `Bearer ${cookie}`},
 });
   return response.data;
 };
-const refreshAccessToken = async () => {
+
+export function verifyCookie() {
+  const accessToken = Cookies.get("access_token");
+  if (accessToken) {
+    return accessToken
+  } else {
+    return null
+  }
+}
+/* const refreshAccessToken = async () => {
   try {
     const response = await api.post('/token/refresh', {'refresh': Cookies.get('refresh')}, {
       withCredentials: true, 
@@ -116,27 +132,15 @@ const refreshAccessToken = async () => {
   }
 };
 
+
 api.interceptors.response.use(
-  (response) => response, 
+  (response) => {
-  async (error) => {
+    const cookie = Cookies.get('refresh');
-    if (error.response && error.response.status === 401) {
+    console.log(cookie);
-      const errorMessage = error.response.data.detail;
+    return response;
-      if (errorMessage === "No active account found with the given credentials") {
+  },
-        return Promise.reject(error);
+  (error) => {
-      } else {
-        const tokens = await refreshAccessToken();
-        if (tokens) {
-          const [newAccessToken, newRefreshToken] = tokens;
-          Cookies.set('refresh', newRefreshToken, {
-            expires: 1,
-            secure: true,
-            sameSite: 'strict',
-          });
-          error.config.headers['Authorization'] = `Bearer ${newAccessToken}`;
-          return api(error.config);
-        }
-      }
-    }
     return Promise.reject(error);
   }
-);
+);
+*/

src/composables/useAuth.js

@@ -1,18 +1,23 @@
 import { ref, onMounted } from 'vue';
-import { getuserinfo } from '../api.js';
+import { getuserinfo, verifyCookie } from '../api.js';
 import Cookies from 'js-cookie';
 const isAuth = ref(false);
 const userInfo = ref(null);
 
 export function useAuth() {
   onMounted(async () => {
-    const accessToken = sessionStorage.getItem('access_token');
+    const accessToken = verifyCookie();
     if (accessToken) {
       isAuth.value = true;
       try {
         userInfo.value = await getuserinfo();
       } catch (error) {
-        console.error('Erreur de récupération des informations utilisateur :', error);
+        if (error.response.status = 401){
+          console.error('Expired access token logging out');
+        } else {
+          console.error('erreur inconnue déconnexion')
+        }
+        Cookies.remove('access_token');
         isAuth.value = false;
         userInfo.value = null;
       }
@@ -20,8 +25,7 @@ export function useAuth() {
   });
 
   const logout = () => {
-    sessionStorage.removeItem('access_token');
+    Cookies.remove('access_token');
-    Cookies.remove('refresh');
     isAuth.value = false;
     userInfo.value = null;
   };

src/router/index.js

@@ -4,6 +4,7 @@ import SwaggerView from '../views/Swagger.vue';
 import LoginView from '../views/Login.vue';
 import DashboardView from '../views/Dashboard.vue';
 import WarehousesView from '../views/Warehouses.vue';
+import { verifyCookie } from '../api.js';
 const routes = [
   {
     path: '/',
@@ -47,7 +48,7 @@ const router = createRouter({
 });
 
 router.beforeEach(async (to,from,next) => {
-  const isAuthenticate = sessionStorage.getItem('access_token');
+  const isAuthenticate = verifyCookie();
   if (to.meta.requireAuth && !isAuthenticate || isAuthenticate === 'undefined' || isAuthenticate === 'null') {
     next({name: 'login'});
   } else next();