前端單頁面應用的許可權管理

Haley的空間發表於2018-04-04
前端

原文地址：單頁面應用的許可權管理

在如今前端框架發展的今天，單頁面應用越來越比較常見了，隨之而來也將面對許可權的管理。針對VUE主要說說以下方面：

  • 介面級許可權
  • 頁面級許可權

介面級許可權

介面的許可權一般和UI庫關係不是很大，這裡用axios舉例來說明。常用在管理後臺這些需要獲取使用者登入資訊的介面。這裡使用axios的攔截器就能很方便的實現。

舉個小例子：後臺好多介面發ajax請求獲取資料的時候後端（前端判斷使用者是否登入的手段比較少，cookie？）都會需要獲取使用者是否登入，並在登入的情況反饋到前端，前端跳轉到登入頁面。這個就可以使用這個攔截器來實現。

攔截器

在請求或響應被 then 或 catch 處理前攔截它們。

// 新增響應攔截器
axios.interceptors.response.use(response => {
  // 對響應資料做點什麼
  return response;
}, error => {
  // 對響應錯誤做點什麼
  return Promise.reject(error);
});
複製程式碼
// 新增請求攔截器
axios.interceptors.request.use(config  =>{
  // 在傳送請求之前做些什麼
  return config;
}, error => {
  // 對請求錯誤做些什麼
  return Promise.reject(error);
});
複製程式碼

頁面級許可權

頁面及許可權主要靠vue-router來實現。基本思路是為全域性註冊一個“前置守衛”鉤子函式router.beforeEach。

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // 這裡檢查許可權並進行跳轉
  next()
})
複製程式碼

每個守衛方法接收三個引數：

  • to:Route 即將要進入的目標
  • from: Route 當前導航正要離開的路由
  • next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。
    • next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
    • next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是使用者手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。
    • next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。你可以向 next 傳遞任意位置物件，且允許設定諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。
    • next(error): (2.4.0+) 如果傳入 next 的引數是一個 Error 例項，則導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回撥。

確保要呼叫 next 方法，否則鉤子就不會被 resolved。

結束語

前端單頁面許可權控制在不同的框架中實現思路基本一致。感興趣的同學可以去研究一下。

相關文章