实现系统三十分钟不操作就自动退出到登录页

思路:有的系统为了安全性会要求用户多长时间不操作的时候退出到登录页面,实现这个功能的时候是我们是由前端实现的,接下来看一下我们是怎么实现的,实现的思路是记录用户操作的最后一次时间,还有再次操作的时间,后面的时间戳减去前面一次的时间戳,如果换算出来的时间内大于三十分钟,则退出到登录页面即可(该操作是在拦截器里面进行判断的)
1.先在ipaddress.js定义三十分钟的毫秒数

const LOGINTIME = 1800000  //1000毫秒= 1600000

在这里插入图片描述
在登录api的地方加上:

  /**
   * 登录
   * @param {string} param 登录信息
   */
  static login (data) {
    return service({
      url: `${SERVICE_URL}/user-service/user-service/user/oauth/login`,
      method: 'POST',
      data,
      onAuthLoginTime: true // 加这段
    })
  }

在拦截器上加上这一段(说明:这一段是比较关键的,主要是判断当最后一次操作时间的时间戳减去前面一次的操作的时间的时候是否大于设置指定的时间,如果大于则会退出到登录):

  let currentTime = new Date().getTime()
  if(!getOpenId() && !token && config.onAuthLoginTime)  {
    if (config.onAuthLoginTime){
      // 如果是登录或者跳转页则获取当前时间作为记录,同时还要监听window.onfocus、window.onblur
      sessionStorage.setItem('loginTime', currentTime)
    }else{
      let loginTime = sessionStorage.getItem('loginTime')
      // 判断10分钟内是否存在操作, 存在则清零,不存在则跳转
      if ((Number(currentTime) - loginTime) > LOGINTIME){
        // 跳转登录
          // 取消请求
          config.cancelToken = source.token
          source.cancel('登录超时')
          sessionStorage.removeItem('token')
          router.replace({
            path: '/login'
          })
      }else{
        sessionStorage.setItem('loginTime', currentTime)
      }
    }
  } else if(getOpenId() && token){
    let loginTime = sessionStorage.getItem('loginTime')
    if ((Number(currentTime) - loginTime) > LOGINTIME){
      // 跳转登录
        // 取消请求
        config.cancelToken = source.token
        source.cancel('登录超时')
        sessionStorage.removeItem('token')
        router.replace({
          path: '/login'
        })
        // window.location.replace(LOGIN_URL)
    }else{
      sessionStorage.setItem('loginTime', currentTime)
    }
  }

最后:实现系统长时间不操作的时候自动退出到登录的功能就实现啦。

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

blueSky-fan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值