vue-实现http登录拦截或路由拦截的资源请�

介绍了利用vue-resource request拦截http登录或路由的方法，分享给大家如下：

项目要求

在项目中，前端负责数据对接和业务逻辑处理。后台只需要给出相应的接口来控制接口的授权状态(即未注册的接口会统一返回401未授权状态码，前端会根据vue-resource的拦截器拦截符合条件的状态并做出相应的处理。以下是两个系统的登录页面，用作请求超时或登录拦截的跳转页面

以上是登录超时，登录弹出窗口框自动弹出

代码片段

路由文件

Exportdefault [{name:' root '，path: ' '，component 3360 function(resolve){ require(['您的vue文件路径地址']，resolve)；}，子项：[{ name : ' application layout '，path : '/app/application layout/: appid '，component : function(resolve){ require([' your vue文件路径地址']，resolve)；}，meta: { requireauth 3360 true，//可以向需要登录的页面添加meta属性}}]]下面的代码被添加到main.js条目文件中

const UNAUTHORIZED _ CODE=401router.beforeEach((to，from，next)={ if(to . meta . require auth){ if(storage . get(' platformUser ')){ store . dispatch(' loginUser '，JSON . parse(storage . get(' platformUser ')))))；//将用户信息存储在vuex中以供全局使用next()；} else { store . dispatch(' initlogimodal '，{ state : true })；//显示登录弹出的next()；} } else { next()；}});//截取http请求返回的401状态码，显示登录弹出的vue . http . interceptors . push((request，Next)={ Next((response)={ if(response。尸体。status====unauthorized _ code){//和返回代码存储。dispatch(' initloginmodel '，{ state : true })；//显示store.dispatch('removeUser ')的登录弹出窗口；//移出浏览器中存储的用户信息}返回响应；});});以上可以实现登录前对一些特定路由的拦截，以及后端接口授权失败时的前端业务逻辑操作处理。整篇文章只积累知识点。如果有什么不对的地方，请原谅。希望对大家的学习有帮助，希望大家多多支持我们。