一、登陆功能
1. 第一次登录的时候,前端(客户端)调后端(服务器)的登陆接口,并发送用户名和密码
2. 后端(服务器)收到(客户端)请求,验证用户名和密码,验证成功,就给前端(客户端)返回一个token
3. 前端(客户端)拿到token,将token存储到localStorage或vuex中,并跳转路由页面
4. 前端(客户端)每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面
5. 前端(客户端)在组件中每次调后端(服务器)接口,都要在请求头中加token
6. 后端(服务器)判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401
7. 如果前端(客户端)拿到状态码为401,就清除token信息并跳转到登录页面
二、单点登录
单点登录(Single Sign-On,简称SSO)的实现思路如下:
-
用户登录:用户首次登录一个系统时,需要输入用户名和密码进行身份验证。
-
验证身份:该系统将用户输入的用户名和密码与用户数据库中存储的信息进行比对,如果验证通过,系统会生成一个唯一的令牌(Token)。
-
令牌传递:该系统将令牌传递给一个认证中心(SSO Server)。
-
认证中心:认证中心接收到令牌后,会对其进行验证,如果验证通过,则将该令牌与用户信息进行关联,生成一个全局的会话(Session)。
-
令牌返回:认证中心将该令牌返回给原系统,并将该令牌储存在用户浏览器的 Cookie 中。
-
访问其他系统:用户访问其他系统时,该系统会检查用户的浏览器 Cookie 中是否存在令牌,如果存在,则代表用户已经通过认证,可以直接访问该系统,无需再次输入用户名和密码。 通过以上步骤,用户只需要登录一次即可访问多个系统,提高了用户的使用体验和工作效率。
三、访问页面时突然登录过期跳转到了登录页, 登录成功之后如何跳转到之前的页面?
- 地址重定向到登录页时,用一个参数保存重定向之前的页面地址,比如: redirect
- 在登录页面,先获取保存的重定向路径;
- 登录成功之后,判断是否存在重定向地址,存在则跳转到重定向的地址