vue+element+axios请求拦截和全局守卫

最近在做项目session登录的时候，遇到的问题，这里总结一下。

1.后台使用session做登录，前端这边如何验证用户是否登录呢

 后台使用session做登录验证，我们这边是根本拿不到浏览器端的session，这个时候我们需要换一个思维。

在我们第一次登录成功的时候，我们在可以在自己的本地存储一个数据admin-key，使用localstorage或者cookie都可以，然后我们在vue路由全局守卫中，通过判断admin-key是否存在，来设置用户是否可以访问其他的页面

**如下图是 自己封装了一个getCookit方法来获取我存储的adin-key的**

路由全局守卫的写法    

             如果对路由懒加载不熟悉的，也可以参考如下截图，熟悉的也可直接忽略

路由懒加载

2.当后台返回给我的登录过期的信息，如何使用axios中的路由拦截进行统？

图一，引入的包

图2，请求拦截的写法

a. 图一中引入的包，分别是element-ui中的弹窗样式  

b.图二中引入的包，是进行路由跳转必不可少的，（如果你的项目需求是：用户登录过期，则跳转到登录页面进行重新登录）

总结：

vue路由全局守卫：当用户没有登录的时候，不让用户进入其他的页面

axios拦截器的：当后台返回给我们的登录过期了或者其他的，我们可以提前一起做处理而不用在每次请求接口后对每个数据做判断