前端可控制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页面