token 无感刷新

什么是 token 无感刷新？为什么需要 token 无感刷新？让我们想象一下有这么个场景：你登录一个系统成功后，玩了 10 分钟，发现登录失效了，又要你重新登录，然后又过 10 分钟，又失效了，又要重新登录，难不难受，那这是怎么造成的？是因为权限 token 有效时间很短造成的，不要问，为什么权限 token 过期时间这么短，因为需要实现单点登录。那什么是单点登录呢？请参考单点登录模式。

在单点登录模式下，服务器在我们登录成功后发了两个 token 给我们，一个有效时间短的权限 token（有效时间 10 分钟），一个有效时间长的刷新token（有效时间一个月）。那这个刷新 token有啥用呢，当权限token过期后，我们可以拿刷新token再去换一个新的权限token。

现在，我们需要实现的是 token 的无感刷新，那什么是 token 的无感刷新呢，就是在权限token失效后，自动拿刷新token去换新的权限 token，拿到新的权限token后继续访问系统受保护资源。不需要用户做任何操作，完全无感。

1. 接口封装

在 refreshtoken.js 中封装刷新 token 接口。

为什么需要定义 promise，因为当权限 token 失效时，但这期间同时访问了很多需要权限 token 的接口，不可能每个接口都去调用刷新接口，如果已经在调用刷新接口了，那么就赋值给 promise，在结果没返回前，再次调用刷新接口，直接就返回 promise。

为什么需要定义 __isRefreshToken 呢，因为如果刷新 token 也不存在，那么在调用刷新接口时，就会陷入死循环，需要判断当前需要权限的接口是不是刷新接口。

// refreshtoken.js
import request from "./request.js";
import { getRefreshToken } from "./token.js";

let promise = null;

export const refreshToken = () => {
  if (promise) {
    return promise;
  }
  promise = new Promise(async (resolve) => {
    const resq = await request.get("/refresh_token", {
      headers: {
        Authorization: `Bearer ${getRefreshToken()}`,
      },
      __isRefreshToken: true,
    });
    resolve(resq.code === 0);
  });
  promise.finally(() => {
    promise = null;
  });
  return promise;
};

export const isRefreshRequest = (config) => {
  return !!config.__isRefreshToken;
};

2. 封装 axios 请求

在 request.js 中封装 axios 请求

响应拦截中，后端返回的两个 token，我们都拿着保存着。当响应报 401 时，我们需要判断是不是调用刷新接口报的 401，如果不判断，就会一直在刷新接口这陷入死循环。刷新接口调用成功后，返回新 token，拿到新 token，赋值给 header，继续之前的请求。如果调用刷新接口失败，直接重新登录去。

// request.js
import axios from "axios";
import { setToken, setRefreshToken, getToken } from "./token.js";
import { refreshToken, isRefreshRequest } from "./refreshtoken.js";

const service = axios.create({
  baseURL: "http://localhost:8080",
  headers: {
    Authorization: `Bearer ${getToken()}`,
  },
});

// 响应拦截器
service.interceptors.response.use(async (res) => {
  if (res.headers.authorization) {
    const token = res.headers.authorization.replace("Bearer ", "");
    setToken(token);
    service.default.headers.Authorization = `Bearer ${getToken()}`;
  }
  if (res.headers.refreshtoken) {
    const refreshtoken = res.headers.refreshtoken.replace("Bearer ", "");
    setRefreshToken(refreshtoken);
  }
  if (res.data.code == 401 && !isRefreshRequest(res.config)) {
    const isSuccess = await refreshToken();
    if (isSuccess) {
      res.config.headers.Authorization = `Bearer ${getToken()}`;
      const resp = await service.request(res.config);
      return resp;
    } else {
      // 到登录页
      return res.data;
    }
  }
  return res.data;
});

export default service;

总结：核心代码就这些，小伙伴可以根据这些代码去继续优化到自己的项目里。