單頁面應用的許可權管理
在如今前端框架發展的今天，單頁面應用越來越比較常見了，隨之而來也將面對許可權的管理。針對VUE主要說說以下方面：
-介面級許可權
-頁面級許可權
介面級許可權
介面的許可權一般和UI庫關係不是很大，這裡用axios舉例來說明。常用在管理後台這些需要獲取用戶登錄信息的介面。這裡使用axios的攔截器就能很方便的實現。
舉個小例子：後台好多介面發ajax請求獲取數據的時候後端（前端判斷用戶是否登錄的手段比較少，cookie？）都會需要獲取用戶是否登錄，並在登錄的情況反饋到前端，前端跳轉到登錄頁面。這個就可以使用這個攔截器來實現。
攔截器
在請求或響應被then或catch處理前攔截它們。
// 添加響應攔截器
// 對響應數據做點什麼
returnresponse;
},error=>{
// 對響應錯誤做點什麼
returnPromise.reject(error);
});
// 添加請求攔截器
// 在發送請求之前做些什麼
returnconfig;
},error=>{
// 對請求錯誤做些什麼
returnPromise.reject(error);
});
頁面級許可權
頁面及許可權主要靠vue-router來實現。基本思路是為全局註冊一個「前置守衛」鉤子函數router.beforeEach。
constrouter=newVueRouter({ ... })
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。
結束語
前端單頁面許可權控制在不同的框架中實現思路基本一致。感興趣的同學可以去研究一下。
TAG:Hancoson |