电气网站设计,机械设计软件solidworks,如何联系网站管理员,河南郑州旅游网站制作退出登录一直是一个通用的前端实现方案#xff0c;对于退出登录而言#xff0c;它的触发时机一般有两种#xff1a;
1. 用户主动退出#xff0c;即用户点击登录按钮之后退出#xff1b;
2. 用户被动退出#xff0c;Token过期或被 其他人顶下来 时退出…退出登录一直是一个通用的前端实现方案对于退出登录而言它的触发时机一般有两种
1. 用户主动退出即用户点击登录按钮之后退出
2. 用户被动退出Token过期或被 其他人顶下来 时退出
那么无论是什么退出方式在用户退出时所需要执行的操作都是固定的
1. 清理掉当前用户缓存数据
2. 清理掉权限相关配置
3. 返回到登录页 .用户主动退出策略
1. 在状态管理中添加action 2. 添加退出登录事件 2. 用户被动退出策略
用户被动退出的情况一般是指token过期或者系统需要满足单点登录相应的可以分为前端主动处理和前端被动处理两种方式。
2.1. 被动退出前端主动处理
想要搞明白 主动处理 方案那么首先我们得先去搞明白对应的背景以及业务逻辑 。
那么首先我们先明确一下对应的背景 我们知道 token 表示了一个用户的身份令牌对 服务端 而言它是只认令牌不认人的。所以说一旦其他人获取到了你的 token 那么就可以伪装成你来获取对应的敏感数据。 所以为了保证用户的信息安全那么对于 token 而言就被制定了很多的安全策略比如 .动态 token可变 token .刷新 token 3. 时效 token … 这些方案各有利弊没有绝对的完美的策略而一般所选择的方案就是时效 token。
对于 token 本身是拥有时效的这个大家都知道。但是通常情况下这个时效都是在服务端进行处理而此时我们要在 服务端处理 token 时效的同时在前端主动介入 token 时效的处理中从而保证用户信息的更加安全性。
那么对应到我们代码中的实现方案为
1. 在用户登陆时记录当前 登录时间
2. 制定一个 失效时长
3. 在接口调用时根据当前时间对比登录时间 看是否超过了时效时长
(1). 如果未超过则正常进行后续操作
(2). 如果超过则进行退出登录操作
那么明确好了对应的方案之后接下来我们就去实现对应代码。
创建 utils/auth.js 文件并写入以下代码 以下是在stotage中的代码 以下是在constant 中声明对应常量 在用户登录成功之后去设置时间到 store/user.js 的 login 中 在 utils/request 对应的请求拦截器中进行主动介入 2.2. 被动退出前端被动处理
首先我们需要先明确被动处理需要应对两种业务场景
我们一个一个看首先是Token过期 我们知道对于 token 而言本身就是具备时效的这个是在服务端生成 token 时就已经确定的。 而此时我们所谓的 token 过期指的就是 服务端生成的 token 超过 服务端指定时效 的过程。 而对于单点登录而言指的是 当用户 A 登录之后token 过期之前。 用户 A 的账号在其他的设备中进行了二次登录导致第一次登录的 A 账号被 “顶下来” 的过程。 即同一账户仅可以在一个设备中保持在线状态 那么明确好了对应的背景之后接下来我们来看对应的业务处理场景
从背景中我们知道以上的两种情况都是在服务端进行判断的而对于前端而言其实是服务端通知前端的一个过程。
所以说对于其业务处理将遵循以下逻辑
1. 服务端返回数据时会通过特定的状态码通知前端
2. 当前端接收到特定状态码时表示遇到了特定状态token 时效 或 单点登录
3. 此时进行退出登录处理
那么明确好了业务之后接下来我们来实现对应代码
在 utils/request 的响应拦截器中增加以下逻辑 对于单点登录而言需要配合websockt通信让后端主动推送消息给前端前端收到该通知后主动退出其原理是一样的此处不再赘述。
