added: login, logout and auto refresh token

src/App.vue

@@ -2,10 +2,15 @@
 </script>
 
 <template>
-  <router-link :to="{ name: 'home' }"> Home </router-link>
+  <div>
+    <router-link :to="{ name: 'startPage' }"> Home </router-link>
     <router-link :to="{ name: 'login' }"> Login </router-link>
+  </div>
   <hr>
+  Router view starts below
   <router-view />
 </template>
+
 <style scoped>
+
 </style>

src/main.js

@@ -3,12 +3,10 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
-import { setupAuthInterceptor } from '@/services/setupInterceptors.js'
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
-setupAuthInterceptor()
 
 app.mount('#app')

src/router/index.js

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import StartPageView from '../views/StartPageView.vue'
 import LoginView from '@/views/LoginView.vue'
 
 const router = createRouter({
@@ -7,8 +7,8 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: HomeView,
+      name: 'startPage',
+      component: StartPageView,
     },
     {
       path: '/login',

src/services/apiClient.js

@@ -1,11 +1,113 @@
-import axios from 'axios'
+import { useAuthStore } from '@/stores/authStore.js';
 
-const apiClient = axios.create({
-  baseURL: 'http://localhost:9000/api/v2',
-  timeout: 5000,
-  headers: {
+const BASE_URL = 'http://localhost:9000/api/v2';
+
+let isRefreshing = false;
+let refreshPromise = null;
+
+function createConfig(options = {}) {
+  const authStore = useAuthStore();
+  const headers = {
     'Content-Type': 'application/json',
-  }
-})
+    ...options.headers,
+  };
 
-export default apiClient
+  if (authStore.accessToken) {
+    headers['Authorization'] = `Bearer ${authStore.accessToken}`;
+  }
+
+  return {
+    headers,
+    credentials: 'include',
+    ...options,
+  };
+}
+
+async function refreshAccessToken() {
+  const authStore = useAuthStore();
+
+  if (isRefreshing) return refreshPromise;
+
+  isRefreshing = true;
+  refreshPromise = fetch(`${BASE_URL}/user/auth/refresh`, {
+    method: 'POST',
+    credentials: 'include',
+  })
+    .then(async (res) => {
+      if (!res.ok) throw new Error('Failed to refresh access token');
+      return res.json();
+    })
+    .then((data) => {
+      authStore.setToken(data.accessToken);
+      return data;
+    })
+    .catch((error) => {
+      throw error;
+    })
+    .finally(() => {
+      isRefreshing = false;
+      refreshPromise = null;
+    });
+
+  return refreshPromise;
+}
+
+async function request(url, options = {}, isRetry = false) {
+  const config = createConfig(options);
+
+  const response = await fetch(`${BASE_URL}${url}`, config);
+
+  if (response.status === 401 && !isRetry) {
+    try {
+      const data = await refreshAccessToken();
+
+      const newOptions = {
+        ...options,
+        headers: {
+          ...options.headers,
+          'Authorization': `Bearer ${data.accessToken}`,
+        },
+      };
+      return await request(url, newOptions, true);
+    } catch (e) {
+      const authStore = useAuthStore();
+      authStore.forceLogout();
+      throw e;
+    }
+  }
+
+  if (!response.ok) {
+    let errorData;
+    try {
+      errorData = await response.json();
+    } catch {
+      errorData = {};
+    }
+    throw new Error(errorData.message || `HTTP Error: ${response.status}`);
+  }
+
+  const contentType = response.headers.get('content-type');
+  if (contentType?.includes('application/json')) {
+    try {
+      return await response.json();
+    } catch (e) {
+      console.warn('Failed to parse JSON response', e);
+      return null;
+    }
+  }
+
+  return null;
+}
+
+export const apiClient = {
+  get: (url) => request(url, { method: 'GET' }),
+  post: (url, data) => request(url, {
+    method: 'POST',
+    body: JSON.stringify(data),
+  }),
+  put: (url, data) => request(url, {
+    method: 'PUT',
+    body: JSON.stringify(data),
+  }),
+  delete: (url) => request(url, { method: 'DELETE' }),
+};

src/services/setupInterceptors.js

@@ -1,12 +0,0 @@
-import apiClient from '@/services/apiClient'
-import { useAuthStore } from '@/stores/authStore'
-
-export function setupAuthInterceptor() {
-  apiClient.interceptors.request.use((config) => {
-    const authStore = useAuthStore()
-    if (authStore.accessToken) {
-      config.headers.Authorization = `Bearer ${authStore.accessToken}`
-    }
-    return config
-  })
-}

src/stores/authStore.js

@@ -1,41 +1,59 @@
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
-import apiClient from '@/services/apiClient';
+import { apiClient } from '@/services/apiClient';
+import router from '@/router/index.js';
 
 export const useAuthStore = defineStore('auth', () => {
   // state
-  const accessToken = ref(null)
-  const user = ref(null)
+  const accessToken = ref(null);
+  const user = ref(null);
 
   // getters
-  const isAuthenticated = computed(() => !!accessToken.value)
+  const isAuthenticated = computed(() => !!accessToken.value);
 
   // actions
+  const setToken = (token) => {
+    accessToken.value = token;
+  };
+
   const login = async (email, password) => {
     try {
-      const response = await apiClient.post(
-        "/user/login",
-        { email, password }
-      )
-      const { access_token } = response.data
-      accessToken.value = access_token
+      const response = await apiClient.post('/user/auth/login', { email, password });
+      const { access_token, user: userData } = response;
 
-      console.log('Email', email)
-      console.log('Password', password)
+      setToken(access_token);
+      user.value = userData || null;
+
+      router.push('/');
     } catch (error) {
-      console.log(error)
-    }
+      console.error('Login error:', error);
     }
+  };
 
-  const logout = () => {
-    console.log('logout placeholder')
+  const logout = async () => {
+    accessToken.value = null;
+    user.value = null;
+    try {
+      await apiClient.post('/user/auth/logout');
+    } catch (error) {
+      console.error('Logout error:', error);
     }
+    router.push('/startPage');
+  };
+
+  const forceLogout = () => {
+    accessToken.value = null;
+    user.value = null;
+    router.push('/startPage');
+  };
 
   return {
     accessToken,
     user,
     isAuthenticated,
+    setToken,
     login,
-    logout
-  }
-})
+    logout,
+    forceLogout,
+  };
+});

src/views/HomeView.vue

@@ -1,7 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-Home view
-</template>

src/views/LoginView.vue

@@ -1,16 +1,16 @@
-<script setup lang="js">
-  import { ref } from 'vue';
-  import { useAuthStore} from '@/stores/authStore.js';
+<script setup>
+  import { ref } from 'vue'
+  import { useAuthStore} from '@/stores/authStore.js'
 
-  const store = useAuthStore();
+  const store = useAuthStore()
 
-  const email = ref('');
-  const password = ref('');
+  const email = ref('')
+  const password = ref('')
 
 
   const onSubmit = () => {
-    store.login(email.value, password.value);
-  };
+    store.login(email.value, password.value)
+  }
 </script>
 
 <template>
@@ -35,5 +35,7 @@
 </template>
 
 <style scoped>
-
+div {
+  background: red;
+}
 </style>

src/views/StartPageView.vue

@@ -0,0 +1,20 @@
+<script setup>
+  import { useAuthStore } from '@/stores/authStore.js'
+
+  const store = useAuthStore()
+
+  const logout = () => {
+    store.logout()
+  }
+</script>
+
+<template>
+  <div>Home view</div>
+  <button type="button" @click="logout">no route</button>
+</template>
+
+<style scoped>
+div {
+  background: green;
+}
+</style>