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拦截器的:当后台返回给我们的登录过期了或者其他的,我们可以提前一起做处理而不用在每次请求接口后对每个数据做判断


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,169评论 19 139
  • Web框架之Django: (1)简介: Django是一个由Python写成开源的重量级Web应用框架,采用MT...
    老肖阅读 8,241评论 0 18
  • 来源:http://www.cnblogs.com/opendigg/p/6513510.html UI组件 el...
    YU_XI阅读 7,893评论 0 26
  • 今天下午我跟哥哥去姥姥家了,到了那里,我妈妈给我哥哥打了电话,妈妈说:“你三奶叫你们去烈士陵园,你们两个去不去...
    唐嘉茹阅读 3,294评论 0 4
  • 海星,是可爱的 因为涨潮时积习难改的贪玩 滞留在了金沙滩 成了与海相亲,与滩共话的宠物 这是青岛所辖黄岛区的金、银...
    碧海青天2017阅读 3,392评论 1 2

友情链接更多精彩内容