token过期 - Blade技术社区

一、该问题的重现步骤是什么？

1. token会过期后退出，即使正在操作，这种情况应该怎么做？

二、你期待的结果是什么？实际看到的又是什么？

三、你正在使用的是什么产品，什么版本？在什么操作系统上？

四、请提供详细的错误堆栈信息，这很重要。

五、若有更多详细信息，请在下面提供。

1条回答

admin - BladeX作者

2025-08-01 13:33

做token无感刷新，axios.js可以参考下面的写法

/**
 * 全站http配置
 *
 * axios参数说明
 * isSerialize是否开启form表单提交
 * isToken是否需要token
 */
import axios from 'axios'
import store from '@/store/';
import router from '@/router/'
import { serialize } from 'utils/util'
import { getToken, removeToken, removeRefreshToken } from 'utils/auth'
import { ElMessage } from 'element-plus'
import website from '@/config/website';
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { Base64 } from 'js-base64';
import { isURL } from 'utils/validate';
import { baseUrl } from '@/config/env';

// 全局未授权错误提示状态，只提示一次
let isErrorShown = false;
// 全局锁机制相关变量
let isRefreshing = false; // 标记当前是否正在刷新token
let refreshTokenPromise = null; // 刷新token的Promise，避免重复请求

axios.defaults.timeout = 10000;
//返回其他状态吗
axios.defaults.validateStatus = function (status) {
  return status >= 200 && status <= 500; // 默认的
};
//跨域请求，允许保存cookie
axios.defaults.withCredentials = true;
// NProgress Configuration
NProgress.configure({
  showSpinner: false
});
//HTTPrequest拦截
axios.interceptors.request.use(config => {
  NProgress.start() // start progress bar
  // 初始化错误提示状态
  isErrorShown = false;
  //地址为已经配置状态则不添加前缀
  if (!isURL(config.url) && !config.url.startsWith(baseUrl)) {
    config.url = baseUrl + config.url;
  }
  const meta = (config.meta || {});
  const isToken = meta.isToken === false;
  config.headers['Authorization'] = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`;
  if (getToken() && !isToken) {
    config.headers[website.tokenHeader] = 'bearer ' + getToken()
  }
  //headers中配置serialize为true开启序列化
  if (config.method === 'post' && meta.isSerialize === true) {
    config.data = serialize(config.data);
  }
  return config
}, error => {
  return Promise.reject(error)
});
//HTTPresponse拦截
axios.interceptors.response.use(res => {
  NProgress.done();
  const status = res.data.error_code || res.data.code || res.status;
  const statusWhiteList = website.statusWhiteList || [];
  const message = res.data.msg || res.data.error_description || '系统错误';
  //如果在白名单里则自行catch逻辑处理
  if (statusWhiteList.includes(status)) return Promise.reject(res);
  
  // 如果是401并且没有重试过，尝试刷新token
  if (status === 401 && !res.config._retry) {
    res.config._retry = true;

    // 如果当前已经在刷新token，等待刷新完成
    if (isRefreshing) {
      return refreshTokenPromise.then(() => {
        const meta = res.config.meta || {};
        const isToken = meta.isToken === false;
        const token = getToken();
        if (token && !isToken) {
          res.config.headers[website.tokenHeader] = 'bearer ' + token;
        }
        return axios(res.config);
      });
    }

    // 开始刷新token
    isRefreshing = true;

    // 调用RefreshToken action来刷新token
    refreshTokenPromise = store
      .dispatch('RefreshToken')
      .then(() => {
        isRefreshing = false; // 重置刷新标志
        const meta = res.config.meta || {};
        const isToken = meta.isToken === false;
        // 获取刷新后的token
        const token = getToken();
        if (token && !isToken) {
          res.config.headers[website.tokenHeader] = 'bearer ' + token;
        }
        return axios(res.config);
      })
      .catch(() => {
        isRefreshing = false; // 重置刷新标志
        // 首次报错时提示
        if (!isErrorShown) {
          isErrorShown = true;
          ElMessage({
            message: '用户令牌不可用，请重新登录',
            type: 'error',
          });
        }
        // 清除token信息
        removeToken();
        removeRefreshToken();
        // 重定向到登录页
        store.dispatch('FedLogOut').then(() => router.push({ path: '/login' }));
        return Promise.reject(new Error(message));
      });

    return refreshTokenPromise;
  }

  // 如果是401并且已经重试过，直接跳转到登录页面
  if (status === 401 && res.config._retry) {
    if (!isErrorShown) {
      isErrorShown = true;
      ElMessage({
        message: '用户令牌不可用，请重新登录',
        type: 'error',
      });
    }
    removeToken();
    removeRefreshToken();
    store.dispatch('FedLogOut').then(() => router.push({ path: '/login' }));
    return Promise.reject(new Error(message));
  }
  
  //如果是401则跳转到登录页面
  if (status === 401) store.dispatch('FedLogOut').then(() => router.push({ path: '/login' }));
  // 如果请求为非200否者默认统一处理
  if (status !== 200) {
    ElMessage({
      message: message,
      type: 'error'
    })
    return Promise.reject(new Error(message))
  }
  return res;
}, error => {
  NProgress.done();
  return Promise.reject(new Error(error));
})

export default axios;