## 登录概述

登录业务流程

1. 在登陆页面输入用户名和密码
2. 调用后台接口进行验证
3. 通过验证后，根据后台的相应状态跳转到项目主页

登录业务相关技术点

* HTTP 是无状态的
* 通过 cookie 在客户端记录状态
* 通过 session 在服务端记录状态
* 通过 token 方式维持状态

如果前端与服务器不存在跨域，则使用 cookie + session 方式维持状态，如果存在跨域，则使用 token 的方式。

### token 原理分析

当客户端尝试登陆后，会触发如下阶段：

1. 登录页面输入用户名和密码进行登录；
2. 服务器验证通过之后生产该用户的 token 并返回；
3. 客户端接收到后存储该 token；
4. 后续客户端所有请求都携带该 token；
5. 服务器收到 token 后验证是否通过；

 ![image-20210517203706971](../images/Vue%E7%94%B5%E5%95%86%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/image-20210517203706971.png)

## 登录页面

使用 element-plus 来进行布局，使用到了如下的组件：

* `el-form`
* `el-form-item`
* `el-input`
* `el-button`
* 字体图标