转载自:
转载:https://my.oschina.net/lixiaoyan/blog/1510462
vue-resource请求超时实现http拦截及路由拦截
我们可以通过路由拦截做什么?我认为最主要的便是对权限的控制,比如有的页面需要登录了才能进入,有些页面不同身份渲染不同.接下来简单的讲一下登录拦截.
vue路由拦截器
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
/*
* 按需加载
*/
component: (resolve) => {
require(['../components/Home'], resolve)
}
}, {
path: '/record',
name: 'record',
component: (resolve) => {
require(['../components/Record'], resolve)
}
}, {
path: '/Register',
name: 'Register',
component: (resolve) => {
require(['../components/Register'], resolve)
}
}, {
path: '/Luck',
name: 'Luck',
// 需要登录才能进入的页面可以增加一个meta属性
meta: {
requireAuth: true
},
component: (resolve) => {
require(['../components/luck28/Luck'], resolve)
},{
path: '/vender', //厂商编码管理
name: 'vender',
meta: {
requireAuth: true
},
component: resolve => require(['../components/content/venderCoding/venderCoding.vue'], resolve),
},
}
]
})
// 判断是否需要登录权限 以及是否登录
router.beforeEach((to, from, next) => {
if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限
if (localStorage.getItem('username')) {// 判断是否登录
next() //有登录名称进行下一步路由
} else {// 没登录则跳转到登录界面
next({
path: '/Register',
query: {redirect: to.fullPath} //这一句我的项目中没有用到这一句
})
}
} else {
next()
}
})
export default router
vue-resource 实现http拦截登录
请求超时设置通过拦截器Vue.http.interceptors实现具体代码如下 main.js里在全局拦截器中添加请求超时的方法
Vue.http.interceptors.push((request, next) => {
//console.log(this) //此处this为请求所在页面的Vue实例
request.method = 'POST'; //在请求之前可以进行一些预处理和配置
// continue to next interceptor
//console.log(request);
next((response) => { //在响应之后传给then之前对response进行修改和逻辑判断。对于token时候已过期的判断,就添加在此处,页面中任何一次http请求都会先调用此处方法
console.log(response);
if (response.headers.map['session-status'] != undefined || response.headers.map['Session-Status'] != undefined) {
// response.body = '/login';
// this.$router.push('/main')
router.replace({
path: 'login'
//query: {redirect: router.currentRoute.fullPath}
});
}
return response;
});
});