vue 登录实现逻辑

一般都用vue写，可以从vant组件或者element-ui组件找个登录的from表单，写完css样式，设置校验规则，一种是非空的校验，一种是判断用户输入是否合法的校验，然后就是铺数据，这里一般用ajax发，一般都是用的模块化的思想来单独封装请求，发送后获取到token的数据，token除了登录页面别的页面想实现数据请求一般都要带，所以我们把token放到vuex中的state里，用mutations里定义的方法来修改state中的数据，因为vuex中存贮的数据是存在内存里刷新后就没有了所以我们要把token存在本地，可以用localstarge或者cookie存储再把本地存储的token赋值到vuex中。然后再用请求拦截器给来给每次请求都加请求头和token 。但是呢,token不是永久的,所以会有这种失效的问题,所以当时的处理方案,就是根据后端返回的状态码进行判断,如果确实不存在了,那么用Vue-Router中提供的一个钩子函数,实现拦截,如果存在,那就正常放行, 最后$router.push()实现跳转登录功能。

接下来单独说一下登录的请求如何发出

1.表单验证（login/index.vue）

            1.utils/validate.js ---> validMobile

2.调用 api/user.js中封装好的api

             1.找到axios实例：utils/request.js中获取axios实例

             2.设置基地址从环境变量中获取，好处是上线后基地址自动变化。

             3.全局都可以用process.env.VUE_APP_BASE_API,当基地址用

3.收集用户的参数，传给上一步中的api。（页面上收集页面的数据项名与接口中一致）

4.经过请求拦截器，添加请求头（添加token， utils/request.js）

5.后端没给设置，自己解决跨域问题，写一个代理转发(vue.config.js)，代理是与本机同源的，而代  理是服务器，服务器与服务器之间没有跨域问题，让代理来获取后端的数据，再传给客户端这样就解决了跨域的问题，但是这只能用在dev模式下，上线后就无法用了

6.后端服务器要启动，mongoDB也要启动；后端才能收到请求，返回数据

7.经过响应拦截器的处理(utils/request.js)

    1.判断当前操作是否成功，决定是否axios报错Promise.reject(）自动接收错误的结果

     2.简化获取有效数据的写法(脱壳)response.data。axios请求的数据一般都爱带一层data可以在这里脱壳，方便后面使用

8.得到api调用之后的结果（login.vue）

9.保存token到vuex（store/modules/user.js）

10.token做持久化(utils/auth.js)