首先了解下登录
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
request 请求封装
1.在utils/auth.js中封装设置cookie的方法
2.在utils/request中封装axios请求设置
3.在api/login.js中封装登录api请求
4.最后再回到modules/user.js中完成登录的store
之后更新上传图片和信息到数据库的功能