In my Vue application, I have set up a single axios instance to handle all HTTP requests across the app. There is a response interceptor in place that checks for any 401 unauthorized responses from the back end and displays an alert message accordingly. However, I am facing an issue where I have to click "OK" on the alert message twice for it to disappear, and I'm unsure of the cause.
Here is the Axios instance code:
import axios, { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
const axiosInstance: AxiosInstance = axios.create();
axiosInstance.interceptors.response.use(
(response: AxiosResponse) => response,
(error: AxiosError) => {
if(error.response && error.response.status === 401) {
alert('There has been an issue. Please log out and then log in again.');
return Promise.reject(error);
}
}
);
export default axiosInstance;
The request being intercepted:
import axiosInstance from 'axios-instance';
public async getloggedInUserId() {
await axiosInstance.get('/sessions.json')
.then((response) => {
if(response.data.user_id) {
this.SET_USER_ID(response.data.user_id);
}
});
}
I have looked into similar threads such as Javascript alert shows up twice, but my situation appears to be different. I attempted changing the return statement from return Promise.reject(error); to return false; without success.