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);
              // 加入 token
              localStorage.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过期是由后端提供，前端只需在拦截那儿判断即可。