vue-resource请求超时实现http拦截及路由拦截

 

转载自：

转载：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;

    });

});