如何对登录token有效期控制,前端控制和后端控制

前端可控制token有效期 , /主动退出

1- 在用户每一次登录时,将用户当前登录时时间保存到store中

2- 设定一个固定的存在有效时间,

3- 在每一次发请求之前,请求拦截器中检验保存在store中的用户登录时保存的时间+有效时间是否大于当前的时间

如果大于了当前的时间,则不做任何操作,说明token 没有过期

当小于当前时间时,说明token已经过期,则强制用户退出登录

退出登录的操作:清除保存的token,强制用户返回登录页面

以下为主动退出的代码段

代码书写在request.js文件中

// 定义允许token存在的时间
const TOKEN_LIVE_TIME = 6 * 60 * 60 * 1000 //一天

// 请求拦截器
service.interceptors.request.use((config) => {
  if (store.getters.token) {
    // 判断用户当前的token是否过期
    // 如果过期了,不允许再发送请求,如果没有过期,则继续
    // 首先获取当前时间
    const LoginTime = parseInt(localStorage.getItem('LoginDate'))
    if (LoginTime + TOKEN_LIVE_TIME < Date.now()) {
      // 此时超时
      // 执行退出操作
      store.dispatch('user/logout')
      Message.error('用户登录已过期,请重新登录')
      return
    }
    config.headers.Authorization = `Bearer ${store.getters.token}`
  }
  return config
})


后端控制 / 被动退出

在响应拦截器中做判断 当用户登录过期时,后端会返回用户登录过期的状态码,前端只需要用if来检测后端返回的数据,如果返回的数据显示当前token已经过期,那么将不返回数据给用户,而是直接进行退出操作,并且强制返回到login页面

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值