vue无感刷新lin-cms-koa后台的token

vue yekong

vue数据大屏开发过程中,有客户需要做一个后台来实现数据交互,这里我们选用了lin-cms-koa,但是和lin-cms-koa相匹配的后台不太符合自己的需要,所有vue后台需要自己重新来做了。

在做后台的时候,发现token经常会失效,所以我们需要实现token失效后,刷新token的功能,然后重新请求接口。

这里将axios封装方法记录下

import axios from 'axios';
import { apiBaseUrl } from '@/api/ipConfig.js';

const instance = axios.create({
    baseURL: apiBaseUrl,
    timeout: 10000,
    // 移除全局 Content-Type 设置
});

// 请求拦截器
instance.interceptors.request.use(
    config => {
        const accessToken = localStorage.getItem('access_token');
        if (accessToken) {
            config.headers['Authorization'] = `Bearer ${accessToken}`;
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

// 响应拦截器
instance.interceptors.response.use(
    response => {
        return response.data; // 返回响应数据
    },
    async error => {
        const originalRequest = error.config;

        // 检查是否是 401 或 422 错误,并且不是 /cms/user/login 接口
        if ((error.response.status === 401 || error.response.status === 422) &&
            !originalRequest._retry &&
            !originalRequest.url.includes('/cms/user/login')) {

            originalRequest._retry = true; // 防止重复请求
            try {
                const refreshToken = localStorage.getItem('refresh_token');

                // 使用 GET 请求来刷新 token
                const response = await axios.get(`${apiBaseUrl}/cms/user/refresh`, {
                    headers: {
                        'Authorization': `Bearer ${refreshToken}` // 设置请求头
                    }
                });

                // 检查返回的结果
                if (response.data && response.data.access_token) {
                    // 更新 access_token 和 refresh_token
                    localStorage.setItem('access_token', response.data.access_token);
                    localStorage.setItem('refresh_token', response.data.refresh_token); // 如果需要更新 refresh_token
                    return instance(originalRequest); // 重新发送原始请求
                } else {
                    // 刷新 token 失败,处理逻辑
                    localStorage.removeItem('access_token');
                    localStorage.removeItem('refresh_token');
                    window.location.href = '/login'; // 跳转到登录页面
                    return Promise.reject(error);
                }
            } catch (err) {
                console.error('刷新 token 失败:', err);
                localStorage.removeItem('access_token');
                localStorage.removeItem('refresh_token');
                window.location.href = '/login'; // 跳转到登录页面
                return Promise.reject(error);
            }
        }
        return Promise.reject(error); // 其他错误直接拒绝
    }
);

export default instance;

喜欢