1. 年前项目趋于稳定,想着把Vue构建的后台管理项目重构一下,主要是因为老项目是Vue和jquery混用,然后随着不停地增加功能,代码也变得越来越臃肿和不好维护,趁着这段时间抓紧重构一下,也是对自己的一次梳理和提升。
2. 就先从登录开始吧,现在我们项目登陆的流程是把用户名,密码,验证码通过登录接口发送给后端后,后端会返回一个字段里面包含token,通过登陆后,以后每次请求都要把这个token放到请求头header里面,如果没有则返回错误信息。
3. 发起请求的库用的axios,然后还用到了element-ui, 在src目录下面新建一个request.js, 因为登录接口不需要加token,然后axios可以在请求前和请求后做一些操作,如:
4. 我是把登录成功后的token信息放到了vuex里面,然后在vuex里面把token加到了sessionStorage里面,因为如果放到vuex里面的话,刷新之后登陆成功后的信息就不保存了,所以放到了sessionStorage里面。
5. 我们应该全局使用这个axios所以在main.js中引入它:
6. 项目部分参考: vue-admin 这个项目,文档:vue-element-admin , github地址:GitHub - PanJiaChen/vue-element-admin: A magical vue admin http://panjiachen.github.io/vue-element-admin,非常感谢作者,学到很多!!!