项目场景：

页面长时间未操作的时候，会自动退出登录，并且提示你的登录已过期，需重新登录。那这个是怎么实现的呢？

两种方案

第一种是完全由后端实现的，后台在servlet可以获取到session，可以设置一个十分钟（这个时间根据你的需求而定）的过期时间，过期sessionId会重新生成,后端直接判断当前sessionId是否更改，判断完后直接重定向到登录页面。

第二种是由前端和后端配合实现的，当我们登录系统时，在登陆后，后台会种一个指定时长的登录态到cookie；前端的原理很简单，就是轮询登录态，发现登录态过期了，就弹框提示
代码如下：

 // 1.获取本地登录态;let userCookie = $.cookie( 'appid ');// 2.轮询登录态let timerId = setInterval(()={// 判断当前获取的登录态和之前获取的登录态是否一致if($.cookie( 'appid') != usercookie){// 不一致时,估计是不同用户登录// 继续判断当前登录态是否过期  if(typeof $.cookie( 'appid') == undefined && typeof userCookie != undefined)E// 登录态过期则弹窗提示alert("您的登录已过期请重新登录");}}},1000)

关于它的Tips：

登录态：在服务端一般会使用session或者token来表示用户的登录状态，用来标识这个用户的身份。

登录成功后，后端会给session设置一个字段，给字段设置对应的值，过期失效后这个值就会变成空或者undefined之类的。

登录态的解析一般就是入参是token，而返回结果是userId的方法（或服务、接口），第一次登录成功时，后端会把用户信息加密生成一个token，通过登录接口返回给前端；解析登录态时，前端通过发请求调接口的方法把token传到后台，由后端解析判断

登录态的几种类型：

1.存储型token
存储型token，就是根据token这个字符串，可以在服务端存储上查到用户信息，那就是校验成功，如果查不到，那就是校验失败。

2.计算型token
计算型token，就是把用户信息如userId加密成一个字符串，这个字符串就是token，那么每次解析其实就是解密，解密出明文，比如userId,generateTimestamp，那么再根据generateTimestamp判断是否过期，如果解析都失败了，那就直接失败。

3.计算和存储
考虑到计算和存储的优劣势，我们可以考虑结合他们。这里举个例子token是个加密后的密文，解密后可以分成好几个字段，分别代表userId,generateTime,randomString。那么，如果解析都失败了，那就直接失败了，如果解析成功了，再根据generateTime来判断是否过期，如果过期了，那也直接失败了，如果都通过了，在拿randomString去存储中查询，以Redis为例，我们的存储结构可以设计成key是userId，value是sorted set，其中每个元素就是randomString，查得到就是合法，查不到就是非法。

来源：简书
作者：Christine的学习日记
链接：https://www.jianshu.com/p/7829f6ece110

页面长时间未操作，实现自动退出登录原理相关推荐

php到期自动过期,PHP实现页面长时间无操作，自动过期函数
PHP实现页面长时间无操作,自动过期函数发布于 2015-01-13 19:55:41 | 878 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertex ...
web 页面长时间未操作自动退出方法（自动退出登录）
web 页面自动超时自动退出方法思路: 使用 mouseover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出: 具体时间代码如下(js): var ...
原生js制作页面长时间未操作退出登录
昨天一个同事问我,进入到一个页面后,这个时候不进行任何操作,然后15分钟后就自动退出登录,这个功能怎么实现? 电脑进入待机状态原理说到这个问题,我觉得这个问题和电脑长时间未操作进入待机状态是一个 ...
VUE实现长时间未操作退出登录
背景:在现在大多系统中,为了保障用户的安全,都会有固定时间未操作则自动退出登录的功能,这里根据我目前了解的内容大致实现一个简单的. 我的想法是这样,通过对定时器setTimeOut的使用,来进行倒计时 ...
vue 上次登录时间_vue实现登录之后长时间未操作，退出登录
效果如下: vue实现用户登录系统之后,长时间未操作,提示登录超时,直接退出登录,跳转至登录页面. app.vue: import {mapActions } from 'vuex'; import ...
vue 上次登录时间_Vue设置长时间未操作登录自动到期返回登录页
Vue设置长时间未操作登录以后自动到期返回登录页首先我们写在main.js文件中 import routerUtil from "@/utils/routerutil";//先将 ...
如何处理电脑长时间未操作出现的假死？
如何处理电脑长时间未操作出现的假死? 我们平时经常会遇到由于长时间未操作电脑,再使用时只有鼠标光标可以移动,桌面上的图标无法响应,包括任务栏的程序,那么我们应该怎么处理比较得当呢? 尝试使用光盘插拔动 ...
WPF窗口长时间无人操作鼠标自动隐藏
原文:WPF窗口长时间无人操作鼠标自动隐藏在软件开发中有时会有等待一段时间无人操作后隐藏鼠标,可能原因大致如下: 1.为了安全性,特别是那些需要用到用户名和密码登录服务端的程序,常常考虑长期无人操作 ...
几分钟计算机不操作就注销,win10系统长时间不操作就自动注销的方案
有关win10系统长时间不操作就自动注销的操作方法想必大家有所耳闻.但是能够对win10系统长时间不操作就自动注销进行实际操作的人却不多.其实解决win10系统长时间不操作就自动注销的问题也不是难事, ...

页面长时间未操作，实现自动退出登录原理

项目场景：

两种方案

关于它的Tips：

登录态的几种类型：

页面长时间未操作，实现自动退出登录原理相关推荐

最新文章

热门文章