vue2.x使用beforeRouteEnter路由鉤子進行鑑權

前言

第一次在掘金髮文章，不對的地方還請你們多多指點。後臺管理系統，其中比較重要的一點就是權限控制。最近一年一直在使用vue全家桶進行後臺管理系統的開發，說說個人一點心得。

基礎頁面結構

後臺管理系統主要分爲一個登陸頁和主頁面，主頁面裏面的路由是須要進行鑑權的，而權限數據通常都是登陸接口返回的。下面是一個常見的路由

export default new Router({
    routes: [
        { path: "/", name: "home", component: Home ,redirect: '/index',
            children: [ /*這裏配置頁面路由*/ ]
        },
        { path: "/login",name: "login",component: Login },
        { path: "*",redirect: '/'},//其餘錯誤的url重定向到主頁
    ]
});

複製代碼

登陸接口返回的權限數據不能直接存儲到vuex中，由於在主頁面（Home.vue）刷新以後數據就沒了，固然了有持久化存儲的方案（先不討論），主頁須要的菜單數據，若是是和路由數據差異很大，能夠寫死，可是不影響咱們使用beforeRouteEnter路由鉤子鑑權。

改寫路由數據

若是想實現路由數據複用到菜單，咱們能夠在router.js中將路由數據配好，可是不初始化：

const routes= [
    {
        path: '/',name: 'home',component: () => import('~/Home'),//按需加載
        redirect: '/menu1',children: [/*頁面的路由，具體請看文末完整demo*/]
    },
    { path: '/login', name: 'login', component: () => import('~/Login') },
    { path: "*", redirect: '/login' },
];
export default routes;
複製代碼

而後在main.js中初始化路由數據

import Router from "vue-router";
import routes from "./router";//引入路由數據
Vue.use(Router);
const router = new Router({routes});//實例化路由對象
複製代碼

beforeRouteEnter路由鉤子鑑權

home.vue頁面的beforeRouteEnter路由鉤子觸發時機就是第一次進入home.vue頁面的時候，可是在這個頁面中點擊其餘菜單不會觸發，咱們也只須要在第一次進入的時候對菜單進行初始化。

咱們須要在Home.vue中利用beforeRouteEnter路由鉤子生成權限菜單，並存儲權限數據到vuex中，首先在Login.vue頁面將登陸返回的權限數據存儲到本地localStorage或者sessionStorage，而後 在Home.vue中引入路由數據，下面代碼中routes就是引入的路由數據

beforeRouteEnter (to, from, next) {
    const permission = localStorage.getItem('permission');//也可也使用sessionStorage，看實際狀況須要
    if(!permission){//沒有權限就直接退出
        next({ name: "login", replace: true });
    }
    const rightArr = JSON.parse(permission),
    //路由數據過濾無權限的頁面並轉爲菜單數據
        transMenu = (arr, parebtPath = '/') => 
            arr.filter(item => rightArr.includes(item.meta.code)).map(item => ({
                path: parebtPath + item.path,//路由對應的全路徑
                name: item.meta.name,//路由對應的中文名稱
                icon: item.meta.icon,//路由對應的icon圖標
                code: item.meta.code,//路由對應的權限code
                children: item.children ? transMenu(item.children, `${parebtPath}${item.path}/`) : null,
            })),
        menu = transMenu(routes[0].children);
    if(!menu.length){//沒有菜單權限
        next({ name: "login", replace: true });
    }
    next(vm => {
        if(!rightArr.includes(to.meta.code)){//當前url沒權限就跳轉到第一個菜單
            vm.$router.replace(menu[0].path);
        }
        vm.menuData = menu;
        vm.$store.commit("setPermission", rightArr);
    })
}
複製代碼

補充說明

1. beforeRouteEnter鉤子鑑權是徹底可行的，登陸以後沒權限的菜單入口不會顯示，即便你在url裏面輸入沒權限的路由，刷新頁面依然會觸發beforeRouteEnter。

2. 也能夠用beforeEach這個路由鉤子進行鑑權，可是我的不傾向於這個辦法，每次跳轉都檢查一下有點浪費，使用主頁面的beforeRouteEnter鉤子既完成了鑑權，也實現了權限和token的持久化存儲。

3. 我很是推薦你們使用localStorage和sessionStorage，cookie仍然存在的價值就是主域名相同的時候能夠共享。

4. 路由的meta對象還能夠添加其餘的數據，好比說這個路由不生成菜單，就能夠在這裏面加一個flag， 而後就是不須要鑑權的菜單能夠直接將code設置固定值或者爲空，看本身定義。

5. 代碼裏面有一點缺陷就是菜單生成的時候，若是有子孫菜單項的權限，可是沒有父級菜單權限，就不會生成菜單數據。解決辦法也很簡單，將arr.filter(item => rightArr.includes(item.meta.code))這一段代碼改成遞歸判斷子孫節點的權限便可

最後

完整demo的地址：github.com/gongshun/vu…，有什麼問題或者代碼有啥疑問，歡迎你們評論