轉載自：

轉載：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;

    });

});