前端双token无感刷新图文详解

目录

• 1.双token的使用场景
• 2.什么是token
• 3.如何无感刷新token（图文＋代码）
• 总结

import axios from "axios";
import { getToken, setToken, setRefreshToken, getRefreshToken } from "./token";
import { ElMessage } from "element-plus";
import router from "@/router";
import { refreshToken } from "./refreshtoken";
const service = axios.create({
  baseURL: "http://localhost:8087",
  headers: {
    Authorization: `Bearer ${getToken()}`,
  },
});
// 添加请求拦截器
service.interceptors.request.use(
  function (config) {
    if (config.url === "/refresh_token") {
      config.headers["Authorization"] = `Bearer ${getRefreshToken()}`;
    }
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
service.interceptors.response.use(async (res) => {
  // 1.第一次登录了以后 后台在header里面返回了短token 那么要先接收token存储到localstorage里面
  if (res.headers.authorization) {
    const token = res.headers.authorization.replace("Bearer ", "");
    // 设置短token
    setToken(token);
    service.defaults.headers.Authorization = `Bearer ${token}`;
  }
  // 2. 第一次登录了以后 后台在header里面返回了长token 那么要先接受长token 存储到localstorage里面
  if (res.headers.refreshtoken) {
    const refreshtoken = res.headers.refreshtoken.replace("Bearer ", "");
    // 设置长token
    setRefreshToken(refreshtoken);
  }
  // 3 假设当后端返回401的时候 代表token失效 时间到了 这个时候正常处理就是跳到登录页面
  // 但是在实际的业务场景的时候 用户体验非常不好

  if (res.data.code === 401) {
    // ElMessage({
    //   message: "token失效",
    //   type: "warning",
    // });
    // router.push("/login");
    // 这个地方就是短token失效了 提交表单 不跳到登录页面 因为这样用户体验很不好
    // 请求刚刚定义的一个接口
    // 这个时候 提交表单的接口 还没提交 停在这里了 现在要干啥？请求
    // 干啥了？ 请求了changtoken携带过去 刷新token的接口
    const success = await refreshToken();
    if (success) {
      res.config.headers.Authorization = `Bearer ${getToken()}`;
      const result = await service.request(res.config);
      return result;
    }
  }

  return res.data;
});

function request(options) {
  options.method = options.method || "get";
  // 关于get请求参数的调整
  if (options.method.toLowerCase() === "get") {
    options.params = options.data;
  }

  return service(options);
}

export default request;