Token 失效退出至登录页面

目录

前端设置： 

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过期是由后端提供，前端只需在拦截那儿判断即可。