【VUE】用户登陆的token实现（vue-admin-template中使用的方式）_vue_admin_template_token

新写的小项目中，需要实现用户的登陆功能，以及部分功能未登录即无法使用需要登陆的导航守卫功能。阅读和修改了vue-admin-template中的实现方法，最终完成了登陆功能demo，在这里整理一下相关的实现流程及一些实现原理。

实现流程

登陆功能实现流程

1. Web页面，填写用户名和密码，点击登陆，触发handleLogin function验证表单后，将登陆表单数据推给vuex中的Login acntion。
2. Login action，调用login api，给后端指定api发送请求，包括用户名与密码数据（密码最好加密后再做网络传输）
3. Login action，登陆成功则将后端返回的token存储到cookies中去，并用vuex的SET_TOKEN mutation将token数据存到vuex中。
4. Login action，执行成功，handleLogin获得成功状态未catch到error，执行router的push，完成页面跳转。

导航守卫实现流程

1. 在vue router的index.js中，设置一个数组whiteList，规定不需要登陆验证的页面。
2. router.beforeEach(to, from, next)，添加导航守卫。
3. 通过getToken function，查看cookies中所存的token是否存在，如果不存在则重定向到登陆页。
4. 如果token存在，若路由访问的是登陆页，则路由重定向至首页，并重新执行导航守卫的验证流程。
5. 如果token存在，若路由访问的不是登录页，则执行导航守卫的验证流程。
6. 验证流程，如果token存在，查看vuex中的自定义属性是否为空（如用户权限角色role等），如果为空则通过GetInfo action获取用户信息。
7. GetInfo action，调用getInfo api向后端发送请求，如果后端无法用token数据获得存储的信息（token非法），则清空cookie中的token，并重定向至首页，重新执行导航验证。
8. GetInfo action，调用getInfo api向后端发送请求，成功用token数据获得后端存储的name、roles、avater等数据，并存储到vuex中，结束导航守卫验证流程。

具体实现代码

登陆功能

1. 登陆页面方法调用
   
2. 具体实现
   a. vuex中的Login action
   
   b. 调用的login api
   
   c. 调用的setToken cookie
   d. 调用的SET_TOKEN mutation
   

导航守卫

1. vue-router添加导航守卫
   
2. 根据token获得用户数据
   

其他内容

cookies安装以及出现的npm找不到的问题

1. 需要npm 安装 js-cookie即可（这很简单，无问题，但是npm遇到问题了…）
2. 我安装时需要npm14以上的版本
3. 于是npm卸载重装最新版本
4. 结果webstorm找不到npm包了，不能编辑器自动使用npm安装依赖包了（命令行还是可以找到的）
5. webstorm preference去配置npm的地址，但是webstorm无法访问系统的隐藏目录啊！也即/usr/local/bin/npm根本访问不到啊！
6. 一直没找到解决方法

token验证问题

1. 上述的登陆功能和导航守卫都不关心token是否是合法的，会不会是用户瞎写的，他们都只关心是否有token。
2. 在GetInfo action中进行了token的验证，其本质并不是在登陆或导航守卫中进行token验证，而是在与后端发送请求时进行了token验证。
3. 也即，token验证的本质，是在向后端发送请求时附带着token，后端对token进行检验，如果无问题即无问题，如果有问题会返回错误状态码。
4. 前端，根据返回的状态码分析是否请求成功，以及具体的错误原因。如果错误原因是token非法，则清空token数据，并因token变化而触发导航守卫。
   

关于token，cookies，session

可以主要看这一篇https://www.cnblogs.com/moyand/p/9047978.html

关于vuex以及本地储存

可以主要看这一篇https://zhuanlan.zhihu.com/p/91990957

参考资料

1. js-cookie中文文档https://blog.csdn.net/qq_20802379/article/details/81436634
2. vue-router导航守卫文档https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html