使用 Vue Resource 的 interceptors 處理不同的 http status code

首先你的 Vue 專案也是使用 Vue Resource 處理 http request, 再往下看~

在 SPA 因為有大量接 API 的需求,但每次都要在獨立的 component 處理不同的 http status code 狀態,實在有點麻煩,比方說遇到 api 的 status 是 401 的話,就要再寫一個 router push 到使用者登入畫面之類的 code,重複的邏輯散落在各處 page component.

因為 vue resource 有個好用的 api 叫做 interceptors,覺得他跟 Laravel 的 middleware 很相似,就是所有 request 都會經過他,做一些處理,因此可以利用 interceptors 過濾每一次 request 的狀態,假如是 401 就導到 login, 假如是 404 就導過去 not found 頁面。

確認有使用 vue resource:

import VueResource from 'vue-resource'

確認有 use 它:

Vue.use(VueResource)

在 use 之後:

Vue.http.interceptors.push((request, next) => { 
 next((response) => {
  if (response.status === 401) {

   console.log('權限不足');

   // do logout

   router.push({ path: '/login' });

  }

  if (response.status === 404) {

   router.replace({ path: '/404' });

  }

 });
});

參考: https://stackoverflow.com/questions/37228087/vue-js-interceptor

留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源