从零开始的vue后台管理系统-登录

首先了解下登录 

1 传统身份验证的方法

用户提交登录信息

服务端生成一条记录，其中会说明用户信息

服务端返回记录的ID号给客户端

这个ID号会被存储在客户端的Cookie里，下次用户再向服务端发送请求时可以带着这个Cookie，这样服务端会验证该Cookie里的信息，如果找到对应的记录，说明用户通过了身份验证，就把用户请求的数据返回给客户端

而上面再服务端生成的就是用户的Session，需要再服务端定期清理过期的Session

2 基于 token 的登录流程

客户端使用用户名跟密码请求登录

服务端收到请求，去验证用户名与密码

验证成功后，服务端会签发一个Token，再把这个Token发送给客户端

客户端收到Token以后可以把它存储起来，比如放在Cookie里或者Local Storage里

客户端每次向服务端请求资源的时候需要带着服务端签发的Token

服务端收到请求，然后去验证客户端请求里面带着的Token，如果验证成功，就向客户端返回请求的数据

3 token 作用

将token存入本地cookie中，可以保证每次刷新时用户登录状态不丢失

通过token，还可以获取到用户的其他信息

登录事件

点击`handleLogin`触发`vuex`中`actions`的`Login`派发行为 并在登录后跳转页面

从新规划分级

将文件重新规划

|-- store

    |-- modules

    |-- getters.js

    |-- index.js

我们划分出，app, user 两个模块，在 user 里控制用户的登录信息，app 中存储应用的状态，如全局loading或者控制第三方组件的全局大小，如element-ui中的全局组件size

user.js中存储了登录事件所需的事件和数据，handleLogin事件触发的是modules中user模块的actions，这里user.js中的具体方法和state数据，均是封装过的

 request 请求封装

1.在utils/auth.js中封装设置cookie的方法

2.在utils/request中封装axios请求设置

3.在api/login.js中封装登录api请求

4.最后再回到modules/user.js中完成登录的store

之后更新上传图片和信息到数据库的功能