diff --git a/src/services/apiClient.js b/src/services/apiClient.js index 54fb8b8..19557e0 100644 --- a/src/services/apiClient.js +++ b/src/services/apiClient.js @@ -1,83 +1,81 @@ -import { useAuthStore } from '@/stores/authStore.js'; +import { useAuthStore } from '@/stores/authStore.js' -const BASE_URL = 'http://localhost:9000/api/v2'; +const BASE_URL = 'http://localhost:9000/api/v2' -let isRefreshing = false; -let refreshPromise = null; +let isRefreshing = false +let refreshPromise = null function createConfig(options = {}) { - const authStore = useAuthStore(); + const authStore = useAuthStore() const headers = { 'Content-Type': 'application/json', ...options.headers, - }; + } if (authStore.accessToken) { - headers['Authorization'] = `Bearer ${authStore.accessToken}`; + headers['Authorization'] = `Bearer ${authStore.accessToken}` } return { headers, credentials: 'include', ...options, - }; + } } async function refreshAccessToken() { - const authStore = useAuthStore(); + const authStore = useAuthStore() - if (isRefreshing) return refreshPromise; + if (isRefreshing) return refreshPromise - isRefreshing = true; + 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'); - const data = await res.json(); - console.log("Refresh response data: ", data); - return data; + if (!res.ok) throw new Error('Failed to refresh access token') + return await res.json() }) .then((data) => { const token = data.access_token if (!token) { - throw new Error('No access_token in refresh response'); + throw new Error('No access_token in refresh response') } - authStore.setToken(data.access_token); - console.log('refreshed token', data.access_token); + authStore.setToken(data.access_token) - return data; + + return data }) .catch((error) => { - throw error; + throw error }) .finally(() => { - isRefreshing = false; - refreshPromise = null; - }); + isRefreshing = false + refreshPromise = null + }) - return refreshPromise; + return refreshPromise } async function request(url, options = {}, isRetry = false) { - const config = createConfig(options); + const config = createConfig(options) - const response = await fetch(`${BASE_URL}${url}`, config); + const response = await fetch(`${BASE_URL}${url}`, config) if (response.status === 401 && !isRetry) { try { - const data = await refreshAccessToken(); + const data = await refreshAccessToken() - const token = data.access_token; + const token = data.access_token if (!token) { - throw new Error('Refresh response did not contain access_token'); + throw new Error('Refresh response did not contain access_token') } const newOptions = { @@ -86,36 +84,40 @@ async function request(url, options = {}, isRetry = false) { ...options.headers, 'Authorization': `Bearer ${token}`, }, - }; - return await request(url, newOptions, true); + } + return await request(url, newOptions, true) } catch (e) { - const authStore = useAuthStore(); - authStore.forceLogout(); - throw e; + const authStore = useAuthStore() + authStore.forceLogout() + throw e } } if (!response.ok) { - let errorData; + let errorData try { - errorData = await response.json(); + errorData = await response.json() } catch { - errorData = {}; + errorData = {} } - throw new Error(errorData.message || `HTTP Error: ${response.status}`); + throw new Error(errorData.message || `HTTP Error: ${response.status}`) } - const contentType = response.headers.get('content-type'); + let data = null + const contentType = response.headers.get('content-type') if (contentType?.includes('application/json')) { try { - return await response.json(); + data = await response.json() } catch (e) { - console.warn('Failed to parse JSON response', e); - return null; + console.warn('Failed to parse JSON response', e) } } - return null; + return { + status: response.status, + ok: response.ok, + data, + } } export const apiClient = { @@ -129,4 +131,4 @@ export const apiClient = { body: JSON.stringify(data), }), delete: (url) => request(url, { method: 'DELETE' }), -}; +} diff --git a/src/stores/authStore.js b/src/stores/authStore.js index 264431a..31c2cc1 100644 --- a/src/stores/authStore.js +++ b/src/stores/authStore.js @@ -8,6 +8,8 @@ export const useAuthStore = defineStore('auth', () => { const accessToken = ref(localStorage.getItem('accessToken')) const user = ref(null) + const activeTab = ref('signin') + // getters const isAuthenticated = computed(() => !!accessToken.value) @@ -24,10 +26,7 @@ export const useAuthStore = defineStore('auth', () => { const login = async (email, password) => { try { const response = await apiClient.post('/user/auth/login', { email, password }) - const { access_token, user: userData } = response - - setToken(access_token) - user.value = userData || null + setToken(response.data.accessToken) router.push({ name: 'collection'}) } catch (error) { @@ -55,8 +54,10 @@ export const useAuthStore = defineStore('auth', () => { const register = async (email, password) => { try { const response = await apiClient.post('/user', { email, password }) - if (response.data.code === 200) { - router.push({ name: 'login' }) + + if (response.status === 200) { + activeTab.value = 'signin' + router.push({ name: 'login'}) } } catch (error) { console.error('Register error:', error) @@ -65,7 +66,8 @@ export const useAuthStore = defineStore('auth', () => { const userInfo = async () => { try { - return await apiClient.get('/user/') + const response = await apiClient.get('/user/') + return response.data } catch (error) { console.error('Register error:', error) } @@ -75,6 +77,7 @@ export const useAuthStore = defineStore('auth', () => { accessToken, user, isAuthenticated, + activeTab, setToken, login, logout, diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue index ef25406..aa11906 100644 --- a/src/views/LoginView.vue +++ b/src/views/LoginView.vue @@ -1,26 +1,35 @@