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

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

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

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

項(xiàng)目需求

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

以上是登錄超時(shí)，登錄彈窗框自動(dòng)彈出來

代碼片段

路由文件

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,    // 需要登錄才能進(jìn)入的頁面可以增加一個(gè)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')));    //將用戶信息存儲(chǔ)到vuex中，供全局使用
   next();
  } else {
   store.dispatch('initLoginModal', {state: true});     //顯示登錄彈窗
   next();
  }
 } else {
  next();
 }
});

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

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

您可能感興趣的文章: