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库的提示组件