基于现有Axios配置实现401自动跳转登录页的技术咨询

背景需求 #

当token无效导致接口返回401时，需直接跳转至登录页。

现有Axios配置代码 #

import axios from 'axios'
import store from '../redux/store'
import { resetUser } from '../redux/slices/userSlice'

export const unauthorized = axios.create({
    baseURL: process.env.REACT_APP_BACKEND_ENDPOINT,
    timeout: 20000,
})

export const axiosAuthorized = axios.create(
    {
        baseURL: process.env.REACT_APP_BACKEND_ENDPOINT,
        timeout: 20000
    })

axiosAuthorized.interceptors.request.use(
    config => {
        config.headers["x-access-token"] = store.getState().user.user.accessToken
        // console.log("token", store.getState().user.user.accessToken)
        return config

    }
)

axiosAuthorized.interceptors.response.use((response) => {
    return response
}, (error) => {
    // console.log(`${error?.response?.config?.url} \n${error}`)
   
    return Promise.reject(error);
})


axiosAuthorized.interceptors.request.use(
    config => {
        console.log('config', config.baseURL, config.url, config.params)
        return config
    }
)

问题描述 #

重新打开项目页面时，token已处于失效状态（接口返回401），导致内部服务无法正常运行，需在此场景下自动跳转至登录页。

实现方案 #

核心是修改axiosAuthorized的响应拦截器，在捕获到401状态码时执行状态重置与页面跳转，同时避免重复跳转问题：

修改后的响应拦截器代码 #

axiosAuthorized.interceptors.response.use((response) => {
    return response
}, (error) => {
    // 捕获401未授权错误
    if (error.response?.status === 401) {
        // 重置Redux用户状态，清除无效token
        store.dispatch(resetUser())
        
        // 避免重复跳转：添加全局标记
        if (!window.isRedirecting) {
            window.isRedirecting = true
            // 跳转到登录页，根据项目实际路由调整路径
            window.location.href = '/login'
            // 1秒后重置标记，允许后续可能的跳转（可选）
            setTimeout(() => {
                window.isRedirecting = false
            }, 1000)
        }
    }
    return Promise.reject(error);
})

关键细节说明 #

• 状态重置：调用resetUser()清除Redux中的用户信息，确保后续请求不会携带无效token
• 页面跳转：使用window.location.href是通用跳转方式，若使用React Router，可提前创建路由实例（而非直接用useNavigate钩子，因为拦截器不在组件上下文内）进行跳转
• 重复跳转防护：通过window.isRedirecting标记防止多个并发401请求触发多次页面重定向

内容的提问来源于stack exchange，提问作者Ömer Faruk Köse