使用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登錄攔截，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。