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

红太狼 2023-03-04 09:08 15阅读 0赞

#### 一、登录流程分析 ####

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` 请求时提供，用于校验用户是否具备访问接口的权限

1.  `Token` 的用途，如下所示：

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

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