Vue中实现带token登录的逻辑——panjiacheng的模板登录逻辑

在看黑马和尚硅谷的后台视频教学时，都提到了panjiacheng的vue-admin-template项目，但是内部文件逻辑性很强，初学者想搞懂需要一些时间，我整理下我搞懂的过程。

vue-admin-template

该项目是基于vue和element-ui所构成的框架的精简版，在实现登录过程中，比较重要的文件如下：
–src
----api 用来封装请求的接口
------user.js 关于用户的一些信息请求
…
----store vuex文件
------modules
--------user.js 关于用户的vuex配置文件
…
----utils 封装的请求
------request.js 封装的axios文件
----views 路由页面的文件夹
------login 登录页面
…
–env.decelopment 开发环境配置接口

登录的要求

借助vue和element-ui的情况下，简单的登录逻辑如下：

但后期的操作需要token来提供权限，且频繁使用，所以添加需求：

1. 用token进行登录判断
2. token可以保存到本地

现在的逻辑如下：

模板的实现

尽管逻辑差不多相同，但模板要实现的功能和集成程度要高的多。
在封装过程中，模板的实现过程如下：

为了实现更高效率的封装，模板用了多层逻辑实现登录。
我们从login页面开始，一步步往下盘。

表单验证

这个逻辑不用多说，在element-ui页面中，用ui框架自带的逻辑验证validate 实现验证，通过自定义的校验规则来检测账号的正确性，该逻辑点击按钮时就可以完成。
随后按钮点击事件的处理函数就会调用 vuex 中的 action 异步处理方法来处理vuex。
不过为什么要将vuex放到事件的处理函数中呢？而不是用处理函数调用axios请求，随后存到vuex中呢？

vuex

vuex中负责将异步请求的数据存储到本地，且全局可以调用，而请求是个异步函数，所以 存储的逻辑放在mutations中，请求的逻辑放在actions中，请求成功后，返回的值调用mutations函数，并使用coockie保存到本地。
当然，coockie也是单独封装到一个页面中，随后进行调用。

uesr/api

vuex中的action并非直接调用二次封装的axios，而是通过调用user/api实现，因为使用user信息的可能不止一处，所以额外封装了一个api。
这个api很简单，仅仅在调用函数内，返回axios的结果。

axios二次封装

这里涉及到所有请求流程的核心部分：发送请求。
在登录的流程里涉及两个部分：axios发送请求，和响应拦截。
响应拦截将服务器返回的数据进行解析，包括错误信息的处理，随后将数据返回值封装的api函数（这个函数是个空壳，只有一个返回值），也就是调用的vuex的action函数中。

至此，登录的流程结束。

文章只讲了逻辑，没有太多代码，结合实际项目旅顺更好。