vue2实现当用户token过期时重新跳转到登录页功能

1. 在登录页面实现点击立即登录功能

​
​
login() {
      console.log(1111);
      let date = {
        //双向绑定的name数据和pass数据
        name: this.form.name,
        pass: this.form.pass,
      };
      getLogin(date).then((res) => {
        console.log(res);
        //res.meta.msg 调用接口成功时返回的变量
        let suc = res.meta.msg;
        //如果请求接口的数据不为空
        if(res.data!=null){
          let token = {
            //请求接口的token值
            name: res.data.token,
            //当前的时间戳
            time: new Date().getTime(),
          };
          //存入token 并将对象转化为字符串
          localStorage.setItem("token", JSON.stringify(token));
       }
        if (suc == "登录成功") {
          this.$router.push({ path: "/about" });
          this.$message({
            message: suc,
            type: "success",
          });
        } else {
          this.$message({
            message: "请输入正确的用户名和密码",
            type: "warning",
          });
        }
      });
    },

​

​

注：这里我用的element组件 实现用户名密码的双向数据绑定 

getLogin是封装的路由  然后把date传到封装的路由里接受拼接   

效果如下：

import http from "./http.js"
async function getLogin(date){
    let {data} =await http.post("login?username="+date.name+'&password='+date.pass)
    return data
}
export {getLogin}

2. 在路由页面定义路由守卫

//定义一个时间
let time=30000
//router. beforeEach 是全局钩子函数，它是在路由跳转之前所调用的函数，在实际开发中页面进度条的加载、设置页面标题、判断用户是否已经登录过了等等都可以在该函数中执行。
router.beforeEach((to, from, next) => {
  //把转化为字符串的本地取出来 并转换回来
  let token=JSON.parse(localStorage.getItem('token'))
  //如果本地有数据
  if(token){
    //获取当前时间
    let newtime=new Date().getTime()
    // 当前时间减去存储时间是否大于30000毫秒
    if(newtime-token.time>time){
      // 如果大于清楚本地存储并跳转登录
      localStorage.removeItem('token')
      next('/')
    }else{

    }
  }else{
    //如果没有数据返回登录页面
    if(to.path=="/"){
      next()
    }else{
      alert('请先登录,在访问其他页面')
      next('/')
    }
  }
})

注：router.beforeEach（）一般用来做一些进入页面的限制。比如没有登录，就不能进入某些页面，只有登录了之后才有权限查看某些页面。。。说白了就是路由拦截。

let time=xxx时间可以自定义 建议刚开始实验效果时定义短一点的时间 避免等待时间过长不出效果