handle login and constent login

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@primevue/themes": "^4.2.5",
     "axios": "^1.7.9",
+    "js-cookie": "^3.0.5",
     "primeicons": "^7.0.0",
     "primevue": "^4.2.5",
     "swagger-ui": "^5.18.2",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       axios:
         specifier: ^1.7.9
         version: 1.7.9
+      js-cookie:
+        specifier: ^3.0.5
+        version: 3.0.5
       primeicons:
         specifier: ^7.0.0
         version: 7.0.0
@@ -644,6 +647,10 @@ packages:
   is-hexadecimal@1.0.4:
     resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
 
+  js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+
   js-file-download@0.4.12:
     resolution: {integrity: sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg==}
 
@@ -1779,6 +1786,8 @@ snapshots:
 
   is-hexadecimal@1.0.4: {}
 
+  js-cookie@3.0.5: {}
+
   js-file-download@0.4.12: {}
 
   js-tokens@4.0.0: {}

src/api.js

@@ -1,11 +1,63 @@
 import axios from 'axios';
+import Cookies from 'js-cookie';
 
 const api = axios.create({
   baseURL: 'http://127.0.0.1:8000/api',
   timeout: 2500,
+  withCredentials: true,
 });
 
 export const createUser = async (userData) => {
     const response = await api.post('/users', userData);
+    const { access, refresh } = response.data;
+
+    Cookies.set('refresh', refresh,{
+        expires: 1,
+        secure: true,
+        sameSite: 'strict',
+    });
+    sessionStorage.setItem('access_token', access);
     return response.data
-}
+};
+
+export const getuserinfo = async () => {
+    const response = await api.get('/users/me/', {
+        headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},
+    });
+    return response.data;
+};
+const refreshAccessToken = async () => {
+    try {
+      const response = await api.post('/token/refresh', {'refresh': Cookies.get('refresh')}, {
+        withCredentials: true, 
+      });
+  
+      const { access, refresh } = response.data;
+      
+      return [access, refresh];
+    } catch (error) {
+      console.error('Refresh token request failed:', error);
+      return null;
+    }
+  };
+
+api.interceptors.response.use(
+    (response) => response, 
+    async (error) => {
+      if (error.response && error.response.status === 401) {
+        const [newAccessToken,newRefreshToken] = await refreshAccessToken();
+        if (newAccessToken) {
+            Cookies.set('refresh', newRefreshToken,{
+                expires: 1,
+                secure: true,
+                sameSite: 'strict',
+            });
+          error.config.headers['Authorization'] = `Bearer ${newAccessToken}`;
+          return api(error.config);
+        }
+      }
+      return Promise.reject(error);
+    }
+  );
+// const response = await api.post('/users', userData, { 
+// headers: {Authorization: `Bearer ${sessionStorage.getItem('access_token')}`},);

src/views/Login.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { ref } from 'vue';
-import { createUser } from '../api.js';
+import { onMounted, ref } from 'vue';
+import { createUser, getuserinfo} from '../api.js';
 import { useToast } from 'primevue/usetoast';
 import PMessage from 'primevue/message';
 
@@ -9,6 +9,8 @@ const email = ref('');
 const password = ref('');
 const errors = ref({ username: '', email: '' });
 const toast = useToast();
+const isAuth = ref(false);
+const userInfo = ref(null);
 
 async function make_user() {
   errors.value = { username: '', email: '' };
@@ -34,12 +36,30 @@ async function make_user() {
   }
 }
 
+onMounted(async() => {
+  const accessToken = sessionStorage.getItem('access_token');
+  if (accessToken) {
+    isAuth.value = true;
+    try{
+      userInfo.value = await getuserinfo();}
+      catch (error){
+        console.error("erreur de récupération: ", error);
+        isAuth.value = false;
+      }
+    }
+});
+
 </script>
 
 <template>
   <div class="container">  
     <span>StockSeeker Login</span>
-    <div class="form-container">
+    <div v-if="isAuth" class="form-container">
+      <p v-if="userInfo">Bienvenue, {{ userInfo.username }}</p>
+      <p v-if="userInfo">email :{{ userInfo.email }}</p>
+    </div>
+
+    <div v-else class="form-container">
       <div class="form">
         <label for="username">Username:</label>
         <input type="text" class="p-inputtext" name="username" id="name" v-model="username" required>