vue-resource請求，實現http登陸攔截或者路由攔截

項目需求

• 項目是先後臺分離，前端負責數據對接，以及業務邏輯的處理，後臺只須要給相應的接口便可
• 後臺會控制接口的受權狀況（即，未登陸的接口，統一返回401未受權狀態碼，前端根據vue-resource的攔截器攔截符合條件的狀態，並作出相應的處理。）
• 如下爲兩個系統的登陸頁面，做爲請求超時或者登陸攔截的跳轉頁面

以上是登陸超時，登陸彈窗框自動彈出來

代碼片斷

• 路由文件

export default [
  {
    name: 'root',
    path: '',
    component: function (resolve) {
      require(['你的vue文件路徑地址'], resolve);
    },
    children: [
        {
            name: 'applicationLayout',
            path: '/app/applicationLayout/:appId',
            component: function (resolve) {
              require(['你的vue文件路徑地址'], resolve);
            },
            meta: {
              requireAuth: true,        // 須要登陸才能進入的頁面能夠增長一個meta屬性
            }
        }
    ]  
]

• main.js 入口文件中加入如下代碼

const UNAUTHORIZED_CODE = 401;

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (storage.get('platformUser')) {
      store.dispatch('loginUser', JSON.parse(storage.get('platformUser')));        //將用戶信息存儲到vuex中，供全局使用
      next();
    } else {
      store.dispatch('initLoginModal', {state: true});          //顯示登陸彈窗
      next();
    }
  } else {
    next();
  }
});

//攔截http請求中返回401狀態碼，並針對其顯示登陸彈窗
Vue.http.interceptors.push((request, next) => {
  next((response) => {
    if (response.body.status === UNAUTHORIZED_CODE) {  //與後臺約定登陸失效的返回碼
      store.dispatch('initLoginModal', {state: true});                //顯示登陸彈窗
      store.dispatch('removeUser');                                           //移出瀏覽器中存儲的用戶信息
    }
    return response;
  });
});

以上便能實現登陸以前針對某些特定路由的攔截，和後臺接口受權失效時前端業務邏輯操做處理, 整篇文章僅做知識點積累，若有不妥之處，請多多包涵。