目录
前端设置:
1. 在登录页面,调用登录的接口后,直接获取当前时间并保存在本地,类似保存token。
2. 在路由守卫 获取本机存储的时间戳,加15分钟与当前时间进行对比,如果大于当前时间说明token失效,直接跳转到登录页。
前端设置:
1. 在登录页面,调用登录的接口后,直接获取当前时间并保存在本地,类似保存token。
代码:
// 点击登录login(form) {this.$refs[form].validate((valid) => {if (valid) {this.$API.Login(this.form).then((res) => {// console.log(res, "11111111111");if (res.data.code === 200) {this.$message({message: "登录成功啦",type: "success",showClose: true,});// 将登录名使用vuex传递到Home页面this.$store.commit("handleUserInfo", res.data.data);// 加入 tokenlocalStorage.setItem("token", res.data.data.token);// 添加时间戳//待写// 跳转到首页// console.log(1111111);this.$router.replace("/index");}});} else {//lu 新加this.$message({message: "登录失败,请重新登录",type: "error",showClose: true,});return false;}});},
2. 在路由守卫 获取本机存储的时间戳,加15分钟与当前时间进行对比,如果大于当前时间说明token失效,直接跳转到登录页。
ps:
1. 加15分钟,是因为我这个项目后端设的是20分钟token失效。这个时间可以根据项目随机设置。
2. 大部分项目中token过期是由后端提供,前端只需在拦截那儿判断即可。