山东大学项目实训（二）---登录退出的实现

目录

一、页面展示

1、登录页面

2、主页

二、技术实现

1、页面设计

2、技术细节

3、请求的发送、双Token的获取、路由的跳转

4、退出

5、自动登录

三、下一篇

一、页面展示

1、登录页面

2、主页

二、技术实现

1、页面设计

登录页面整体布局使用element-ui中的Container布局容器中的Header-Main，Header进行顶部的展示，Main主要是登录表单的展示。

登录表单使用Form表单，通过el-input进行账号密码的数据获取，通过el-button绑定点击事件，进行登录请求的发送、双Token的获取、路由的跳转。

主页的页面整体布局使用Container布局容器的Header-Aside-Main，Header进行顶部的展示，与登录页面不同的主要是多了两个按钮，分别进行修改密码操作和退出操作，Aside进行左侧NavMenu导航菜单的展示，Main主要是用于后续的页面展示，通过路由实现页面跳转。

2、技术细节

在登录表单Form表单的使用过程中，el-form的属性ref用于表单验证时操作dom，model绑定表单数据，rules绑定数据校验，配合el-form-item中的prop使用，el-form-item中使用v-model.trim进行对应的数据绑定，.trim用于去除前面和后面的空格，密码输入框的show-password直接实现了密码的显示和隐藏功能。

在表单验证的过程中，prop内的名字必须与data中的名字对应，否则会出现无法校验的问题，这也是我当初踩过的坑。在按钮点击事件中的submitForm（“form”）用于数据校验。

3、请求的发送、双Token的获取、路由的跳转

请求的发送：通过按钮绑定点击事件进行请求的发送，先是数据的整理，这里需要结合后端的api需要我们上传的数据在命名方面的问题，然后是调用自己封装的网络请求发送axios请求。

双Token的获取，在登录请求的响应体中，即后端返回的数据中，携带着双Token，包括token和refreshToken，我们需要将它们存入浏览器的Local Storage中，在后续的请求发送时，请求头中携带token进行网络请求的发送，refreshToken的作用在后续的文章中会详细解析。

路由的跳转，在处理完请求后，确认账号密码无误后，使用$router进行路由的跳转，进入主页。

4、退出

与登录大同小异，也是按钮绑定点击事件，发送网络请求，主要作用是移除浏览器存储的双Token，以及让此双Token在服务器端失效。然后进行一个路由跳转，回到登录页面。

5、自动登录

在进入登录页面时，判断浏览器中是否存在token，存在则直接页面跳转至主页，因为后端返回给我们的token是自带时效和角色判断的，所以我们无需担忧过多问题，只需要在后续请求发送时，携带该token即可。

三、下一篇

在讲refreshToken的问题之前，先得讲网络请求封装方面的问题。