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