前端登录退出处理Token问题(获取、缓存、失效处理)及代码实现方法

// 获取退出登录
logout(context) {
  context.commit("removeToken"); // 删除token
  context.commit("reomveUserInfo"); // 删除用户信息
},

// 获取登录信息
async login(context, data) {
  const result = await loginInfo(data);
  context.commit("setToken", result);
  setTimeStamp(); // 写入时间戳
},

import Cookies from "js-cookie";
const timeKey = 'liqi6limi-timestamp-key' // 设置一个独一无二的key

// 获取时间戳
export function getTimeStamp() {
  return Cookies.get(timeKey)
}
// 设置时间戳
export function setTimeStamp() {
  Cookies.set(timeKey, Date.now())
}

// 设置超时时间
export const TimeOut = 3600; 

// 是否超时
export function IsCheckTimeOut() {
  var currentTime = Date.now(); // 当前时间戳
  var timeStamp = getTimeStamp(); // 缓存时间戳
  return (currentTime - timeStamp) / 1000 > TimeOut;
}

import store from "@/store";
import axios from "axios";
import { getTimeStamp,IsCheckTimeOut } from "@/utils/auth";
import router from "@/router";

// 创建axios实例
const service = axios.create({
  baseURL: "/api",
  timeout: 5000,
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 是否存在token
    if (store.getters.token) {
      if (IsCheckTimeOut()) {
        store.dispatch("user/logout"); // 退出登录的action
        router.push("/login"); // 跳转到登录页
        return Promise.reject(new Error("token超时了")); // 抛出的错误，会在响应拦截器的错误捕捉中捕捉到
        console.log("超时");
      }
      config.headers["Authorization"] = `Bearer ${store.getters.token}`; // 如果token存在 注入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 {
      // 业务已经错误了 
      Message.error(message); // 提示错误消息
      return Promise.reject(new Error(message));
    }
  },
  (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);
  }
);