1.介绍登录的流程---实现登录与缓存token-但未实现路由拦截

1.登录=====>登录成功，登录成功后，后端会返给我们一个token和我们其他的路由、菜单、权限数据

2.把这些数据存储到vuex中----实现数据共享，当页面重新刷新时，vuex中数据不存在，需要重新发请求，为了避免这种情况，将其写入本地缓存中（cookies）

1.1登录功能简单实现----只使用Vuex，不使用本地缓存----按照该流程说

1.1.1封装暴露axios

1.1.2封装登录的接口

1.1.3 vuex中user模块的获取设置token流程-----并且调用接口，获取token

完整代码：===这里的返回结果的数据可以进行响应优化

1.1.4.登录页面通过dispatch调用action，传入接口所需要的参数，并且跳转路由

这里可以进行优化-------拦截器处理data问题

使用前记得引用

1.2将token存入本地缓存（cookies）：四步

1. 只需要将存储的key放置成特定值即可

2.初始化token状态

3.mutations修改token----同步操作 4. 除此之外，为了更好的让其他模块和组件更好的获取token数据，我们可以在store/getters.js中将token值作为公共的访问属性放出

3.在axios拦截器里的config里配置token，保证登录验证的接口能拿到token

5.菜单在进入首页的时候通过获取vuex的菜单数据，渲染菜单

1.3请求优化--- 区分请求基础地址----一般项目中已经改了

前端主要区分两个环境,开发环境,**生产环境**实际还有可能会有测试环境，如何让请求的基准地址在不同的环境下。

1.4响应优化----主要是处理axios返回的数据默认加了一层data的包裹---request.js文件

拦截器

axios返回的数据中默认增加了一层**data的包裹**,我们需要在这里处理下

处理后的代码：

修改登录功能的代码：

2.主页路由拦截-----permission.js文件---定义白名单----beforeEach

此时虽然缓存了token，但在我不登录的情况下，直接输入地址也可以进入网站，下面对其进行优化 业务流程图：

2.1实现

业务逻辑实现的代码流程：任何一个路由跳转，都会进入改全局前置守卫

2.1.1定义白名单

2.1.2全局前置守卫实现思路---to.path（将要进入的页面）

3.渲染用户资料

3.1token注入--如果不注入的话，意味着不登录就可以从后端拿数据--请求头

思考一个问题 前端页面做了权限校验 那后端接口呢 需不需要 也一个权限校验,

如果不加是不是 意味着 不登录就可以拿到数据

headers中的Authorization相当于我们开门（调用接口）时钥匙(token) ，我们在打开任何带安全权限的门时都需要注入token

统一注入token流程

3.2共享用户资料-----但未调用action

此时只是完成了用户的共享（不写入缓存），此时并未调用action，下面对调用action操作做说明

4.权限拦截处调用获取资料action-获取资料隐藏条件有token

获取资料有一个隐藏条件，就是必须含有token

调用action src/permission.js