vue项目：token过期后自动更新token,提示登陆过期并退出登录，跳转到登录页面重新登录

目录

在src/router/index.js文件中编写代码

启动项目，按下F12键，在控制台中输入清除token的命令模拟token过期的情况：

---

确保你安装了elementui,因为提示登录过期的弹框是 elementui组件

（如果你用别的组件库或者直接用alert也可以进行替换。）

下面代码中有关于代码详细的注释，如果你的功能和我的有一定的出入可以适当进行修改

1. 在src/router/index.js文件中编写代码

（请注意：token失效后后端返回的错误码是可设置的，你需要和后端人员沟通一下，确定错误码是什么。）

import { MessageBox } from 'element-ui';

//intervalId 是一个变量，用来存储定时器的 ID。定时器会在每秒钟检查一次用户的登录状态。
let intervalId; 
router.beforeEach((to, from, next) => {
  // 在每次路由跳转之前执行的逻辑
  clearInterval(intervalId); // 清除之前可能存在的定时器
  intervalId = setInterval(() => {
    // 每秒钟检查一次 sessionStorage 中的 token 是否存在
    const tokenStr = window.sessionStorage.getItem('token');
    if (this.code == 1001 && to.path !== '/login') {
      // 如果 token 不存在且当前页面不是登录页，则执行以下逻辑
      clearInterval(intervalId); // 清除定时器，避免重复执行弹框逻辑
      MessageBox.confirm('登录已过期，请重新登录。点击确认跳转到登录页面。', '提示', {
        confirmButtonText: '确认',
        type: 'warning'
      }).then(() => {
        // 用户点击确认后跳转到登录页面
        next('/login');
      });
    }
  }, 1000); // 每秒检查一次
  // 继续路由导航
  next();
});

如果你不需要取消按键:

就在MessageBox.confirm里面加上showCancelButton: false

如果你不需要叉号：

加showClose:false