前端登录功能过程概况

前端登录请求概况

1，表单验证

1. 完整的表单校验需要三个组件完成配合 分别是el-form，el-form-item，表单项，如：el-input
   el-form负责绑定model 和 rules
   el-form-item负责绑定prop
   el-input 负责双向绑定具体的表单数据

2. 简单的校验例如非空，长度等可以直接使用内置的校验配置，如果校验规则复杂建议使用校验函数进行校验。
   比如：我们的手机号比较复杂就使用更加灵活的校验函数
   比如：密码比较简单我们直接使用内置的校验配置即可

3. 手动兜底校验

2，调用封装好的接口函数

发送ajax请求

3，收集用户参数，上传给上一步的函数

获取用户参数，将参数上传Ajax发送的函数

4，经过请求拦截器，添加请求头

设置拦截器

// 响应拦截器
service.interceptors.response.use(response => {
  if (response.data.success) {
    // 操作成功
  } else {
    // 如果success为false 业务出错,直接触发reject 
    // 被catch分支捕获
    return Promise.reject(new Error(response.data.message))
  }
}, error => {
  return Promise.reject(error) // 返回执行错误 让当前的执行链跳出成功 直接进入 catch
})

5，代理转发（vue.config.js）

为解决跨域问题，代理转发

module.exports = {
  devServer: {
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
  }

6，要求后端开启服务器

7，经过响应拦截器处理

1. 判断当前操作是否成功，决定是否axios报错
2. 简化获取有效数据的写法(脱壳)

8，得到接口调用之后结果

9，保存token到vuex

使用vuex的基本逻辑：数据放在state中，要修改数据则调用mutations

1. 先在state中补充定义token
2. 同时，要提供对应的用来修改token的mutation，以方便在用户登陆成功之后，去设置token

10，token做持久化

1. 在对token进行初始化的时候先从本地取一下，优先使用本地取到的值
2. 在设置token的时候除了在vuex中存一份，在本地也同步存一份
3. 在删除token的时候除了把vuex中的删除掉，把本地的也一并删除