如何模拟token过期？实现token过期后自动退登

在前端想做token过期后自动退登时，我们并不能去设置token的超时时长，这是由后端来做的，而通常这个时长又非常长，我们不可能去等待Token过期了再去调试。

所以我们尝试模拟token过期的情况，那么如何模拟token过期呢？

1. 手动清除 localStorage 中的 token

在实际应用中，token 是存储在 localStorage 或 sessionStorage 中的。你可以手动清除 localStorage 中的 token 来模拟 token 过期的情况。

注意！！！此处localStorage是你登录代码逻辑中存储token的东西，可以是localStorage也有可能是sessionStorage等等

// 清除 localStorage 中的 token
localStorage.removeItem('token');

2. 编写一个专门的 mock 函数

你可以编写一个专门用于模拟 token 过期的函数，例如 simulateTokenExpiration，在需要的时候调用它。

function simulateTokenExpiration() {
  localStorage.removeItem('token');
}

// 调用函数来模拟 token 过期
simulateTokenExpiration();

3. 使用开发者工具手动删除 token

在开发过程中，你可以通过浏览器的开发者工具手动删除 localStorage 中的 token。打开开发者工具（通常是按 F12 键），然后在 Console 或 Application 面板中操作。

在删除token后在main.js文件中编辑以下代码，为实现token过期后前端的处理：

if (!localStorage.getItem('token')) {
  // 使用 ElementUI 的 MessageBox 弹框显示消息
  MessageBox.alert('登录状态已过期，请重新登录', '提示', {
    confirmButtonText: '确定',
    callback: () => {
      // 确认按钮的回调函数，在这里跳转到登录页面
      if (router.currentRoute.path !== '/login') {
        router.push('/login');
      }
    }
  });
}