vue+axios完美实现前端路由拦截

一、路由拦截

1.首先在router的index.js里配置一个自定义字段requireAuth,用该字段来判断进入该路由是否需要登录。如果已经登陆则进入该路由,反之则进入登录页面。

如图是路由配置:

vue+axios完美实现前端路由拦截

2.在main.js里面利用vue-router的beforeEach钩子函数对路由进行判断。

实例代码如下所示:

vue+axios完美实现前端路由拦截

解释下这段代码,当我们在登录的时候,利用sessionStorage保存了用户的token值,如果我们进入某一个需要登录的路由并且能够拿到token值的话,则可以直接next();反之进入登录页选择登录。

当然还有一种情况,那就是用户并非主动退出登录,而是token自动失效。此时token值依然保存在本地,需要用户重新登录。这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。

二、拦截器

当返回401状态码,用户则需要重新登录。

vue+axios完美实现前端路由拦截

上一篇:【web开发学习笔记】Structs2 OGNL学习笔记


下一篇:前后端分离djangorestframework—— 接入微信模板消息推送