token失效的处理

一、主动处理

主动处理主要是前端在每次发起请求时都主动去检查一下 token 是否过期。流程图如下：

具体业务图如下

流程图转化代码

流程图转化代码 src/utils/auth.js

import Cookies from "js-cookie";

const TokenKey = "hr-saas-111-token";

const timeKey = "hr-sass-time-key"; // 用来作为时间戳存储的key

export function getToken() {
  return Cookies.get(TokenKey);
}

export function setToken(token) {
  return Cookies.set(TokenKey, token);
}

export function removeToken() {
  return Cookies.remove(TokenKey);
}

export function setTimeStamp() {
  // 设置当前最新的时间戳
  // Date.now()  new Date.getTime()
  Cookies.set(timeKey, Date.now());
}

export function getTimeStamp() {
  return Cookies.get(timeKey);
}

src/utils/request.js

import axios from "axios";
import store from "@/store";
import router from "@/router";
import { Message } from "element-ui";
import { getTimeStamp } from "@/utils/auth";
const TimeOut = 3600; // 定义超时时间

const service = axios.create({
  // 当执行 npm run dev  => .evn.development => /api => 跨域代理
  baseURL: process.env.VUE_APP_BASE_API, // npm  run dev  => /api npm run build =>  /prod-api
  timeout: 5000, // 设置超时时间
});
// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // config 是请求的配置信息
    // 注入token
    if (store.getters.token) {
      // 只有在有token的情况下 才有必要去检查时间戳是否超时
      if (IsCheckTimeOut()) {
        // 如果它为true表示 过期了
        // token没用了 因为超时了
        store.dispatch("user/logout"); // 登出操作
        // 跳转到登录页
        router.push("/login");
        return Promise.reject(new Error("token超时了"));
      }
      config.headers["Authorization"] = `Bearer ${store.getters.token}`;
    }
    return config; // 必须要返回的
  },
  (error) => {
    return Promise.reject(error);
  }
);
// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // axios默认加了一层data
    const { success, message, data } = response.data;
    //   要根据success的成功与否决定下面的操作
    if (success) {
      return data;
    } else {
      // 业务已经错误了 还能进then ? 不能 ！ 应该进catch
      Message.error(message); // 提示错误消息
      return Promise.reject(new Error(message));
    }
  },
  (error) => {
    Message.error(error.message); // 提示错误信息
    return Promise.reject(error); // 返回执行错误 让当前的执行链跳出成功 直接进入 catch
  }
);
// 是否超时
// 超时逻辑  (当前时间  - 缓存中的时间) 是否大于 时间差
function IsCheckTimeOut() {
  var currentTime = Date.now(); // 当前时间戳
  var timeStamp = getTimeStamp(); // 缓存时间戳
  return (currentTime - timeStamp) / 1000 > TimeOut;
}
export default service;

在登录的时候，如果登录成功，我们应该设置时间戳

// 定义login action  也需要参数 调用action时 传递过来的参数
// async 标记的函数其实就是一个异步函数 -> 本质是还是 一个promise
async login(context, data) {
  // 经过响应拦截器的处理之后 这里的result实际上就是 token
  const result = await login(data) // 实际上就是一个promise  result就是执行的结果
  // axios默认给数据加了一层data
  // 表示登录接口调用成功 也就是意味着你的用户名和密码是正确的
  // 现在有用户token
  // actions 修改state 必须通过mutations
  context.commit('setToken', result)
  // 写入时间戳
  setTimeStamp() // 将当前的最新时间写入缓存
}

二、被动处理

被动处理就是后端告诉我们超时了，我们按照后端接口做出反应即可。如果后端接口没有做处理，主动介入就是一种简单的方式

token 超时的错误码是**10002**

代码实现 src/utils/request.js

(error) => {
  // error 信息 里面 response的对象
  if (
    error.response &&
    error.response.data &&
    error.response.data.code === 10002
  ) {
    // 当等于10002的时候 表示 后端告诉我token超时了
    store.dispatch("user/logout"); // 登出action 删除token
    router.push("/login");
  } else {
    Message.error(error.message); // 提示错误信息
  }
  return Promise.reject(error);
};

无论是主动介入还是被动处理，这些操作都是为了更好地处理 token，减少错误异常的可能性