From 8bd4c8d2c32fac9ec74d06f3da7315becf219de8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A9o?= Date: Fri, 31 Jan 2025 18:23:32 +0100 Subject: [PATCH] jwt token in cookie, no more duplicate requests --- src/App.vue | 6 +-- src/api.js | 82 ++++++++++++++++++++------------------ src/composables/useAuth.js | 14 ++++--- src/router/index.js | 3 +- 4 files changed, 55 insertions(+), 50 deletions(-) diff --git a/src/App.vue b/src/App.vue index a03d8fc..ca93c27 100644 --- a/src/App.vue +++ b/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'}), diff --git a/src/api.js b/src/api.js index 37d60d1..0d606da 100644 --- a/src/api.js +++ b/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; - - Cookies.set('refresh', refresh,{ + const accessToken = response.data.access; + Cookies.set('access_token', accessToken,{ 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, - async (error) => { - if (error.response && error.response.status === 401) { - const errorMessage = error.response.data.detail; - if (errorMessage === "No active account found with the given credentials") { - return Promise.reject(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); - } - } - } + (response) => { + const cookie = Cookies.get('refresh'); + console.log(cookie); + return response; + }, + (error) => { return Promise.reject(error); } -); \ No newline at end of file +); +*/ \ No newline at end of file diff --git a/src/composables/useAuth.js b/src/composables/useAuth.js index c13812b..2ba571c 100644 --- a/src/composables/useAuth.js +++ b/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('refresh'); + Cookies.remove('access_token'); isAuth.value = false; userInfo.value = null; }; diff --git a/src/router/index.js b/src/router/index.js index 1d42d98..bdcfab0 100644 --- a/src/router/index.js +++ b/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();