vue-resource請求實現(xiàn)http登錄攔截或者路由攔截的方法

更新時間：2018年07月11日 16:42:05 作者：羅胖胖

這篇文章主要介紹了vue-resource請求實現(xiàn)http登錄攔截或者路由攔截的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了vue-resource請求實現(xiàn)http登錄攔截或者路由攔截的方法，分享給大家，具體如下：

項目需求

項目是前后臺分離，前端負(fù)責(zé)數(shù)據(jù)對接，以及業(yè)務(wù)邏輯的處理，后臺只需要給相應(yīng)的接口即可
后臺會控制接口的授權(quán)情況（即，未登錄的接口，統(tǒng)一返回401未授權(quán)狀態(tài)碼，前端根據(jù)vue-resource的攔截器攔截符合條件的狀態(tài)，并做出相應(yīng)的處理。）
以下為兩個系統(tǒng)的登錄頁面，作為請求超時或者登錄攔截的跳轉(zhuǎn)頁面

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

代碼片段

路由文件

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狀態(tài)碼，并針對其顯示登錄彈窗
Vue.http.interceptors.push((request, next) => {
 next((response) => {
  if (response.body.status === UNAUTHORIZED_CODE) { //與后臺約定登錄失效的返回碼
   store.dispatch('initLoginModal', {state: true});        //顯示登錄彈窗
   store.dispatch('removeUser');                      //移出瀏覽器中存儲的用戶信息
  }
  return response;
 });
});

以上便能實現(xiàn)登錄之前針對某些特定路由的攔截，和后臺接口授權(quán)失效時前端業(yè)務(wù)邏輯操作處理, 整篇文章僅作知識點積累，如有不妥之處，請多多包涵。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: