Vue - 路由守卫实现携带Token登录

1. 目标

利用Vue的路由守卫实现以下功能：

• 检测到本次访问没有Token时，跳转到登录界面
• 检测到Token超时，跳转到登录界面

2. 登录成功后处理逻辑

登录成功后，后端生成Token发送至前端，此时将其存储在本地；同时还要存储Token的开始时间

window.localStorage.setItem('token', JSON.stringify('后端生成的Token'));
window.localStorage.setItem('tokenStartTime', new Date().getTime());  //  存储token开始时间

3. 配置index.js

修改Vue项目中，router文件夹下的index.js文件

// 为路由对象添加路由导航守卫
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {  //  如果用户访问的是登录页面 直接放行
    return next();
  }

  let token = window.localStorage.getItem('token');  //  从LocalStorage中得到token
  const tokenStartTime = window.localStorage.getItem('tokenStartTime');  //   获取存储token的开始时间

  const timeOver = 2 * 3600 * 1000;  // 定义2个小时过期，让用户重新登录一下
  let date = new Date().getTime();  //  当前时间
  if(date - tokenStartTime > timeOver) {  //  如果大于说明是token过期了
    token = null;
    window.localStorage.removeItem("token");
    window.localStorage.removeItem("tokenStartTime");
  }

  // 如果没有token值 那么就跳转到'/login
  if (!token) {
    if(to.path == '/login') {
      return next();
    }
    Message({
        message: '登录状态过期，请重新登录',
        type: 'warning'
    });
    return next('/login');
  }

  // 如果有token则放行
  next();
})

注意：

• 上述代码中的 /login 要修改为自己项目中的登录路径
• 上述代码的Message是element-ui库的提示组件