fix(album): improving the creation/update workflow
This commit is contained in:
@@ -1,102 +1,93 @@
|
||||
import axios from 'axios';
|
||||
import {useAuthStore} from '@/stores/authStore.js';
|
||||
import { useAuthStore } from '@/stores/authStore.js';
|
||||
|
||||
export function useClient() {
|
||||
if (!import.meta.env.VITE_API_URL) {
|
||||
throw new Error('VITE_API_URL is not provided');
|
||||
if (!import.meta.env.VITE_API_URL) {
|
||||
throw new Error('VITE_API_URL is not provided');
|
||||
}
|
||||
|
||||
const client = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// Request interceptor
|
||||
client.interceptors.request.use(async (config) => {
|
||||
// Check if this is the refresh token endpoint
|
||||
const isRefreshEndpoint = config.url?.includes('api/users/refresh');
|
||||
|
||||
// Check if we need to refresh the token
|
||||
if (authStore.isAuthenticated && !isRefreshEndpoint) {
|
||||
try {
|
||||
// If token is expiring soon, start a refresh and WAIT for it to complete
|
||||
if (authStore.isTokenExpiringSoon(authStore.accessToken)) {
|
||||
console.log(`Token is expiring soon, waiting for refresh to complete before continuing request: ${config.method?.toUpperCase()} ${config.url}`);
|
||||
await authStore.refresh();
|
||||
console.log(`Token refresh completed, proceeding with request: ${config.method?.toUpperCase()} ${config.url}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Failed to refresh token for: ${config.method?.toUpperCase()} ${config.url}`, error);
|
||||
throw error; // This will cancel the request
|
||||
}
|
||||
}
|
||||
|
||||
const client = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
if (authStore.isAuthenticated && !isRefreshEndpoint) {
|
||||
config.headers.Authorization = `Bearer ${authStore.accessToken}`;
|
||||
}
|
||||
|
||||
if (config.data instanceof FormData) {
|
||||
console.log(`Data is FormData, removing explicit Content-Type header for: ${config.method?.toUpperCase()} ${config.url}`);
|
||||
delete config.headers['Content-Type'];
|
||||
}
|
||||
|
||||
return config;
|
||||
});
|
||||
|
||||
|
||||
// Response interceptor
|
||||
client.interceptors.response.use(
|
||||
(response) => {
|
||||
return response;
|
||||
},
|
||||
async (error) => {
|
||||
const originalRequest = error.config;
|
||||
console.error(`Response interceptor caught an error for: ${originalRequest.method?.toUpperCase()} ${originalRequest.url}`, error);
|
||||
|
||||
// Prevent retry loops by checking if this is already a retry or a refresh request
|
||||
if (error.response?.status === 401 && !originalRequest._retry && !originalRequest.url.includes('api/users/refresh')) {
|
||||
console.log(`Received 401 error for: ${originalRequest.method?.toUpperCase()} ${originalRequest.url}, attempting token refresh...`);
|
||||
originalRequest._retry = true;
|
||||
|
||||
try {
|
||||
// Use a timeout to prevent hanging indefinitely
|
||||
const refreshTimeout = new Promise((_, reject) => {
|
||||
setTimeout(() => reject(new Error('Token refresh timeout')), 10000); // 10s timeout
|
||||
});
|
||||
|
||||
// Race the refresh against the timeout
|
||||
await Promise.race([authStore.refresh(), refreshTimeout]);
|
||||
|
||||
console.log(`Token refresh successful, retrying original request: ${originalRequest.method?.toUpperCase()} ${originalRequest.url}`);
|
||||
return client(originalRequest);
|
||||
} catch (refreshError) {
|
||||
console.error(`Token refresh failed for: ${originalRequest.method?.toUpperCase()} ${originalRequest.url}, logging out user:`, refreshError);
|
||||
// Let the authStore handle the navigation with returnUrl
|
||||
throw refreshError;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const authStore = useAuthStore();
|
||||
// If it's a refresh request that failed, or a retry that still failed, give up
|
||||
if (originalRequest.url.includes('api/users/refresh') || originalRequest._retry) {
|
||||
console.log(`Request permanently failed: ${originalRequest.method?.toUpperCase()} ${originalRequest.url}`);
|
||||
}
|
||||
|
||||
// Request interceptor
|
||||
client.interceptors.request.use(async (config) => {
|
||||
console.log(`Request interceptor triggered for: ${config.method?.toUpperCase()} ${config.url}`);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// Check if this is the refresh token endpoint
|
||||
const isRefreshEndpoint = config.url?.includes('api/users/refresh');
|
||||
|
||||
// Check if we need to refresh the token
|
||||
if (authStore.isAuthenticated && !isRefreshEndpoint) {
|
||||
try {
|
||||
console.log(`User is authenticated, checking token for: ${config.method?.toUpperCase()} ${config.url}`);
|
||||
|
||||
// If token is expiring soon, start a refresh and WAIT for it to complete
|
||||
if (authStore.isTokenExpiringSoon(authStore.accessToken)) {
|
||||
console.log(`Token is expiring soon, waiting for refresh to complete before continuing request: ${config.method?.toUpperCase()} ${config.url}`);
|
||||
await authStore.refresh();
|
||||
console.log(`Token refresh completed, proceeding with request: ${config.method?.toUpperCase()} ${config.url}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Failed to refresh token for: ${config.method?.toUpperCase()} ${config.url}`, error);
|
||||
throw error; // This will cancel the request
|
||||
}
|
||||
}
|
||||
|
||||
if (authStore.isAuthenticated && !isRefreshEndpoint) {
|
||||
console.log(`Setting Authorization header for: ${config.method?.toUpperCase()} ${config.url}`);
|
||||
config.headers.Authorization = `Bearer ${authStore.accessToken}`;
|
||||
} else if (isRefreshEndpoint) {
|
||||
console.log(`Skipping Authorization header for refresh endpoint: ${config.method?.toUpperCase()} ${config.url}`);
|
||||
}
|
||||
|
||||
if (config.data instanceof FormData) {
|
||||
console.log(`Data is FormData, removing explicit Content-Type header for: ${config.method?.toUpperCase()} ${config.url}`);
|
||||
delete config.headers['Content-Type'];
|
||||
}
|
||||
|
||||
return config;
|
||||
});
|
||||
|
||||
|
||||
// Response interceptor
|
||||
client.interceptors.response.use(
|
||||
(response) => {
|
||||
console.log(`Response received successfully for: ${response.config.method?.toUpperCase()} ${response.config.url}`);
|
||||
return response;
|
||||
},
|
||||
async (error) => {
|
||||
const originalRequest = error.config;
|
||||
console.error(`Response interceptor caught an error for: ${originalRequest.method?.toUpperCase()} ${originalRequest.url}`, error);
|
||||
|
||||
// Prevent retry loops by checking if this is already a retry or a refresh request
|
||||
if (error.response?.status === 401 && !originalRequest._retry && !originalRequest.url.includes('api/users/refresh')) {
|
||||
console.log(`Received 401 error for: ${originalRequest.method?.toUpperCase()} ${originalRequest.url}, attempting token refresh...`);
|
||||
originalRequest._retry = true;
|
||||
|
||||
try {
|
||||
// Use a timeout to prevent hanging indefinitely
|
||||
const refreshTimeout = new Promise((_, reject) => {
|
||||
setTimeout(() => reject(new Error('Token refresh timeout')), 10000); // 10s timeout
|
||||
});
|
||||
|
||||
// Race the refresh against the timeout
|
||||
await Promise.race([authStore.refresh(), refreshTimeout]);
|
||||
|
||||
console.log(`Token refresh successful, retrying original request: ${originalRequest.method?.toUpperCase()} ${originalRequest.url}`);
|
||||
return client(originalRequest);
|
||||
} catch (refreshError) {
|
||||
console.error(`Token refresh failed for: ${originalRequest.method?.toUpperCase()} ${originalRequest.url}, logging out user:`, refreshError);
|
||||
// Let the authStore handle the navigation with returnUrl
|
||||
throw refreshError;
|
||||
}
|
||||
}
|
||||
|
||||
// If it's a refresh request that failed, or a retry that still failed, give up
|
||||
if (originalRequest.url.includes('api/users/refresh') || originalRequest._retry) {
|
||||
console.log(`Request permanently failed: ${originalRequest.method?.toUpperCase()} ${originalRequest.url}`);
|
||||
// Don't do anything here, let the refresh error handling work
|
||||
}
|
||||
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
return client;
|
||||
}
|
||||
return client;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user