vue项目token时效性及处理

序文

在项目中经常会遇到登录一段时间后，页面会提示登录信息过期需要重新登陆，这样就能保护用户和系统信息不被泄露，从而跳转到登录页让用户重新登陆。这其实主要用到了向后端发送请求时的请求拦截器以及响应拦截器。

路由守卫设卡

首先要路由守卫中添加判断cookie中是否含有token令牌，如果没有的话就直接跳到登录页让用户重新登陆。

router.beforeEach(async (to, from, next) => {
 
  // 没有令牌 跳转到登录页
  if (!cookies.get('token')) {
    router.replace({
        path: '/login',
        query: {
            path: to.fullPath
        }
    })
  }
}

axios设卡

在发送请求给后端时请求头带上token，用来判断当前token有没有过期，在响应拦截器中过期则返回code401跳转到登录页。

import axios from "axios";
const request = axios.create({
  baseURL: 'https://xxxxxx', //服务器地址
  timeout: 60000,
  headers: {
    Token: cookie.get("token")
  },
});
 
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
  (response) => {
    let res = response.data; // 如果是返回的文件
    if (response.config.responseType === "blob") {
      return res;
    } // 兼容服务端返回的字符串数据
    if (typeof res === "string") {
      res = res ? JSON.parse(res) : res;
    }
    return res;
  },
  (error) => {
    //401返回登录页
    if (error?.response?.status == 401) {
        window.parent.location.replace('https://xxxxx/loginout');
        console.log("身份token过期");
    }
    return Promise.reject(error);
  }
);
 
export default request;

内容如有错误，欢迎大家在评论区指出，一起学习，一起成长，谢谢各位的浏览。