Element UI 中登录流程的前后端分析

一、登录流程分析

1. 前端，用户输入用户名和密码，结合路由和权限校验，然后进行登录。这样，前端附带用户名和密码发送给后端。后端接收到后，结合 mysql 应用进行用户鉴权。
2. 后端结合 jwt 应用，通过 jwt 生成 token，将 token 发送给前端。前端保存 token，然后请求用户信息。在保存 token 和请求用户信息中使用了 axios 拦截器。
3. 前端在请求用户信息时，将 token 附带至 http header，发送给后端，后端进行 token 校验。
4. 后端拿到 token 后，解析 token 获得用户名并查询用户信息，然后给前端。前端重定向到 /，通过重定向技术。
5. 前端重定向后，根据用户权限生成菜单，生成侧边栏信息。

二、后端 API 处理流程

1. 前端请求 API，然后进行 jwt token 认证，判断是否属于 jwt 白名单。如果属于白名单，直接调用请求 controller。如果不属于白名单，进行 jwt token 验证。如果验证失败，拦截请求。如果验证通过，调用请求 controller。
2. 在请求 controller 后，进行 express-validator 验证，验证 body 参数。如果验证失败，抛出 404 错误。如果验证通过，在 MySQL 数据库中，调用 login 服务，查询 admin_user 表。
3. 在查询完以后，判断用户是否存在。如果不存在，返回用户名或密码不存在。如果存在，生成 jwt token，然后返回 token 信息。

三、Token 的理解

1. Token，它本质上是字符串，用于请求时附带在请求头中，校验请求是否合法以及判断用户身份。
2. Token、Session 和 Cookie 的区别，如下所示：

• Session 保存在服务端，用于客户端与服务端连接时，临时保存用户信息，当用具释放连接后，Session 将被释放
• Cookie 保存在客户端，当客户端发起请求时，Cookie 会附带在 http header 中，提供给服务端辨识用户身份
• Token 请求时提供，用于校验用户是否具备访问接口的权限

3. Token 的用途，如下所示：

• 拦截无效请求，降低服务器处理压力
• 实现第三方 API 授权，无需每次都输入用户名密码鉴权
• 身份校验，防止 CSRF 攻击

4. JWT，JSON Web Token，是非常流行的跨域身份验证解决方案。