最简单vue用户登录失效跳转登录页

不需要通过后端的token传的时间解析后来判断

思路：在用户登录后进入到布局页面，直接在页面创建后存时间戳，时间一到直接跳转到登录

一，第一种方法

1.在登录页面存当前时间戳

这里使用了封装，没有封装的通过Cookies.set(),存在会话存储还是本地存储还是cookies都行

this.$utils.cookies.set("loginTime",Date.now())

2.在布局页面layout使用定时循环来判断，完整代码

在这我设置了三个时间戳，存的登录时间，失效时间为登录时间相加，还有现在运行时间，注意一定要在跳转到登录页之前清除定时循环任务，不然定时任务还是会一直进行

 created () {
    this.cookiesTime()
  },
methods(){
  cookiesTime () {
      // 登录时间
      let loginTime = parseInt(this.$utils.cookies.get('loginTime'))
      // 失效时间,0.01为0.01小时为36秒，24就是一天
      let loseTime = loginTime + 0.01 * 60 * 60 * 1000
      // 现在时间
      let newTime = Date.now()
      this.$utils.cookies.set('loseTime', loseTime)
      // 每次进入新页面时检查用户信息是否过期
     let setInterId= setInterval(() => {
        let loseTime = this.$utils.cookies.get('loseTime')
        // 如果当前时间大于失效时间
        if (Date.now() > loseTime) {
          this.$utils.cookies.remove("token")
          this.$utils.cookies.remove("uuid")
          this.$utils.cookies.remove("loginTime")
          this.$utils.cookies.remove("loseTime")
          // this.$router.push("/login")
          this.$alert('登录已失效，请重新登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              // 点击确定后清除定时器并且跳转登录页
              clearInterval(setInterId)
              this.$router.push("/login")
            }
          });
        }
      }, 1000) // 每秒检查一次

    }
}

二.第二种方法(推荐)

上面那种，如果用户自动退出登录，那么定时循环任务还是会进行，推荐使用第二种

1.还在在登录后存当前时间戳

 // 只能存在login，不然刷新页面会重新计算
            this.$utils.cookies.set("loginTime",Date.now())

2.在路由导航守卫拦截

import { Message } from 'element-ui'
//定义失效时间,5小时
let overTime = 5 * 60 * 60 * 1000
router.beforeEach(async (to, from, next) => {
  // 验证当前路由所有的匹配中是否需要有登录验证的
    // 这里暂时将cookie里是否存有token作为验证是否登录的条件
    const loginTime = util.cookies.get('loginTime');
    const token = util.cookies.get('token')
    if (token && token !== 'undefined' && loginTime) {
      // 携带上登陆成功之后需要跳转的页面完整路径
      let date = new Date().getTime();
      // 当前时间 - 登录时间 > 设置的过期时间，为过期；则清除token，并强制跳转至登录页
      // 反之为有效期，则放行
      if (date - loginTime > overTime) {
        util.cookies.remove("loginTime")
        util.cookies.remove("token")
        // 显示提示
        Message({
          message: "登录已失效，请重新登录",
          type: 'error',
          duration: 5 * 1000
        })
        next({
          name: 'login',
          query: {
            redirect: to.fullPath
          }
        })
      } else {
        next();
      }

    } else {
      next({
        name: 'login',
        query: {
          redirect: to.fullPath
        }
      })
    }
})

这样就实现了在页面调转的时候会提示用户登录时效并且直接跳转到登录页，如果用户退出登录也不会一直计算

本文章到此结束，希望对你有所帮助~