Vue面试题之用户登录流程基于Vue的后台管理系统，从用户输入账号密码点击登录开始,到进入系统页面这样的一个过程,前端工

用户登录流程

基于Vue的后台管理系统，从用户输入账号密码点击登录开始,到进入系统页面这样的一个过程,前端工程师要做哪些事情。

1. views/login.vue 表单验证

当用户点击登录时首先进行表单验证,本人是用的是 element-ui 中的组件进行表单验证,该组件通过 :model 绑定用户登录表单,通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名,就可以完成表单验证功能。

2. utils/request.js 封装 axios

登录成功后需要调用后端的接口发送登录请求，在发请求之前可以封装请求的一些方法,配置基地址等操作,便于后续使用开发。

1.使用 npm 下载 axios ，并在项目中引入

2.在 utils/request.js 下用 axios.create(config)方法创建一个实例对象(request), 并配置请求基地址和限制请求时间。

const request = axios.create({
  baseURL: '接口基地址',
  timeout: 5000
}）

3.添加请求拦截器和响应拦截器，在响应拦截器中对 2xx 范围内状态码的响应数据进行数据脱壳。

3. api/login.js 封装请求接口

封装好 axios 后，根据后端的接口文档对用户登录接口进行封装。

在 api/login.js 页面下导入封装好的 request.js 模块。
查看接口文档，根据文档要求选择 GET/POST 请求方式, 配置请求地址,携带请求参数。

import request from '@/utils/request'

export const login = data => request.post('/sys/login', data)

4. 调用接口，拿到服务器返回数据

1.在 views/login.vue 中，给登录按钮绑定点击事件，首先进行表单的兜底验证。使用表单对象的 validate（）方法验证用户输入内容，该方法的回调函数的第一个参数可以返回一个布尔值,判断表单验证是否通过,如果通过调用封装好的 api/login.js 下的 login()方法,并携带用户登录表单参数,拿到服务器返回数据。

5. store/modules/user.js 使用 Vuex 存入token

token 是服务器返回数据中的一个参数, 它的作用是用户身份验证,在一些请求接口中,只有携带了 token 服务器才能响应对应的数据,否则提示用户身份验证不通过。

发送登录请求拿到服务器数据后，需要保存 token 值，用于之后的请求,此时需要使用 Vuex 保存 token 值。

store/index.js 下引入Vuex 模块,使用 vue.use(Vuex) 注册 Vuex 组件, 使用 Vuex.Store(config) 创建 Vuex 实例对象, 在创建实例对象时传入 modules ,getters 等参数
在 store/modules 下新建 user.js 文件, 在其中定义 state, mutations, actions 等对象, 开启命名空间并导出, 在 store/index.js 中引入 user.js
在 user.js 中导入 api/login.js , 并且在 user.js 里的 actions 中写入login(context, payload) 方法, 这个方法调用 api/login.js 中的 login(data) 方法,并将返回结果交给 mutation 里的 setToken() 方法
在 user.js 里的 mutation 写入 setToken() 方法, 该方法可以修改 state 中存入的token 属性

6. utils/auth.js 使用 cookie 将数据存入本地

将 token 存入Vuex 里虽然可以将数据持久化处理,但在刷新页面时,Vuex里的数据就会丢失,因此需要将 Vuex 里存入的 token 存入至本地。在这里我是用 cookie 存入至本地。

1.使用 npm 下载 'js-cookie' , 在 utils/auth.js 文件中导入 cookie

2.封装 setToken() ,getToken() ,removeToken() 方法

3.在 store/modules/user.js 中的 state 属性里的 token 使用 getToken() 获取本地的 Token , 在 mutations 属性中的 setToken(state, value) 方法中调用封装的 getToken()

7. router/index.js 配置路由权限控制

token 存入至 Vuex 和 Cookie 后,就可以访问系统首页,需要配置路由,完成页面跳转,但需要根据用户是否拥有token控制用户能访问的页面, 此时可以新建 /permission.js 组件写入路由前置守卫进行权限控制，并在router/index.js中导入permission.js。

创建白名单数组，里面存入用户不需要token时就能访问的页面路径，如404页面，login 页面
使用路由前置守卫 router.beforeEach（function（to，from，next）{}） ,判断用户当前是否有token,有则可以访问系统,无则判断用户访问的页面路径是否在白名单,是则可以访问,不是则返回至login页。

8. utils/request.js 设置服务器响应401时的情况

当发送请求后服务器返回401时,一般是因为设置的token已经过期,此时应该跳转至 /login 页面重新登录,登录重新获取token，这里可以配置响应拦截器进行封装。

1.在响应拦截器中判断服务器返回状态码是否为 401 ，是则调用 store/modules/user.js 中 mutations 的 setToken(state,value) 方法,传入空值,重新设置Token,并返回至 login 页面。

Vue面试题之用户登录流程