当用户点击了登录按钮后，发生了什么(vue版)

一天清晨，用户小明注册了某网站的账号。怀着激动的心情他来到了网站的首页，在输入了用户名和密码后登录到了网站首页。这短短的几秒内发生了什么，这按钮点击的背后究竟是人性的泯灭还是道德的沦丧？今天我将按照以下8个步骤为您揭开序幕，请您拭目以待。

1. 登录表单校验
   

2. 发送Ajax请求
   

3. 请求拦截器触发
   

4. 跨域问题的解决
   

5. 经过响应拦截器的处理机制
   

6. 获得后端返回结果
   

7. 保存token到vuex
   

8. token数据持久化存储到本地
   

1. 登录表单校验:首先在用户输入用户名密码时，前端工程师会设置非空校验(判断输入内容是否为空)以及正则校验(数据是否合规)。以减少发送请求次数增加服务器压力。当非空校验或正则校验不通过时，会提示用户是哪里阻碍了用户登录。若非空与正则同时通过，则来到第二步，发送Ajax请求。 2. 发送Ajax请求，原生的Ajax请求一般用的不如axios多。axios使用是需要先在main.js中导入axios，将axios挂载在vue原型中。也可以二次封装axios，这个二次封装一般包括四个部分1.请求基地址 2.最长等待时长3.请求拦截器 4.响应拦截器。 3.请求拦截器一般会作为判断用户是否携带token的重要武器，但是登录页面一般网页都不需要携带token，而是在登录之后会保存token。

4. 非同源的Ajax请求可能会引起跨域问题，一般有三种解决方案1.JSONP 2.CORS 3.设置代理 不管哪种方法只要能解决结果就是好的。条条大路通罗马。

5.响应拦截器可以针对错误进行捕捉，避免代码报错影响代码往下执行。

6.如果以上步骤都通过了我们就获得了后端返回的结果，这个包括了响应状态码以及成功返回的token

7.通过state，mutations 将token存储在vuex中。可以通过vue插件查看模块中是否保存token成功。

8.这里推荐使用持久化插件存储数据到本地，方便其他模块功能使用时有token才能正常进行。