使用vue-resource請求如何實現http登錄攔截

本篇內容主要講解“使用vue-resource請求如何實現http登錄攔截”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“使用vue-resource請求如何實現http登錄攔截”吧!

路由文件

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;
 });
});

到此，相信大家對“使用vue-resource請求如何實現http登錄攔截”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！