一、前言

在徐州等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站制作、網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需網(wǎng)站建設(shè),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),成都全網(wǎng)營銷,外貿(mào)網(wǎng)站制作,徐州網(wǎng)站建設(shè)費(fèi)用合理。

在廣告ji項(xiàng)目中，角色的權(quán)限管理是卡了挺久的一個(gè)難點(diǎn)。首先我們確定的權(quán)限控制分為兩大部分，其中根據(jù)粒的大小分的更細(xì)：

• 接口訪問的權(quán)限控制

• 頁面的權(quán)限控制

• 菜單中的頁面是否能被訪問

• 頁面中的按鈕（增、刪、改）的權(quán)限控制是否顯示

下面我們就看一看是如何實(shí)現(xiàn)這些個(gè)權(quán)限控制的。

二、接口訪問的權(quán)限控制

接口權(quán)限就是對用戶的校驗(yàn)。正常來說，在用戶登錄時(shí)?{?//請求成功后的操作 ?}) 復(fù)制代碼

后來在一些文章中發(fā)現(xiàn)axios可以在攔截器中直接將Token塞入config.headers.Authorization中，作為全局傳入。下面是代碼部分：

//main.jsimport?axios?from?'axios'//?實(shí)例化Axios，并進(jìn)行超時(shí)設(shè)置const?service?=?axios.create({
?timeout:?5000})//?baseURL//?axios.defaults.baseURL?=?'https://api.github.com';//?http?request?攔截器//?每次請求都為http頭增加Authorization字段，其內(nèi)容為tokenservice.interceptors.request.use(?config?=>?{?if?(store.state.user.token)?{
?config.headers.Authorization?=?`token?${store.state.user.token}`;
?}?return?config
?},?err?=>?{?return?Promise.reject(err)
?}
);export?default?service
復(fù)制代碼

三、頁面權(quán)限控制

在前面已經(jīng)說到，頁面權(quán)限控制又分為兩種：

• 菜單中的頁面是否能被訪問

• 頁面中的按鈕（增、刪、改）的權(quán)限控制是否顯示

這些權(quán)限一般是在固定頁面進(jìn)行配置，保存后記錄到數(shù)據(jù)庫中。

按鈕權(quán)限暫且不提，頁面訪問權(quán)限在實(shí)現(xiàn)中又可以分為兩種方式：

• 顯示所有菜單，當(dāng)用戶訪問不在自己權(quán)限內(nèi)的菜單時(shí)，提示權(quán)限不足

• 只顯示當(dāng)前用戶能訪問的權(quán)限內(nèi)菜單，如果用戶通過URL進(jìn)行強(qiáng)制訪問，則會(huì)直接進(jìn)入404

既然展現(xiàn)出來后不能點(diǎn)，那算幾個(gè)意思，逗我玩兒呢？所謂眼不見為凈，綜合考慮后，肯定是方案二比較符合良好的用戶體驗(yàn)。

好，我們現(xiàn)在梳理一下大致的頁面訪問權(quán)限的流程：

在對流程梳理完成后我們開始進(jìn)行詳細(xì)的編寫。

1、創(chuàng)建路由表

創(chuàng)建路由表實(shí)際上沒有什么難度，照著vue-router官方文檔給的示例直接寫就行了。但是因?yàn)橛胁糠猪撁媸遣恍枰L問權(quán)限的，

所以需要將登錄、404、維護(hù)等頁面寫到默認(rèn)的路由中，而將其它的需要權(quán)限的頁面寫到一個(gè)變量或者一個(gè)文件中，這樣可

以有效的減輕后續(xù)的維護(hù)壓力。

下面將index.js的代碼貼上，異步路由將適量減少，以免占過多篇幅。

//?router/index.jsimport?Vue?from?'vue'import?Router?from?'vue-router'import?App?from?'@/App'import?store?from?'../store/index'Vue.use(Router);//手動(dòng)跳轉(zhuǎn)的頁面白名單
const?whiteList?=?[?'/'];//默認(rèn)不需要權(quán)限的頁面
const?constantRouterMap?=?[
?{
?path:?'/',
?name:?'登錄',
?component:?(resolve)?=>?require(['@/components/login'],?resolve)
?},
?{
?path:?'/index',
?name:?'nav.Home',
?component:?(resolve)?=>?require(['@/components/index'],?resolve)
?},
?{
?path:?'/templateMake',
?name:?'模板制作',
?component:?(resolve)?=>?require(['@/components/Template/templateMake'],?resolve)
?},
?{
?path:?'/programMack',
?name:?'節(jié)目制作',
?component:?(resolve)?=>?require(['@/components/Template/programMack'],?resolve)
?},
?{
?path:?'/release',
?name:?'節(jié)目發(fā)布',
?component:?(resolve)?=>?require(['@/components/Program/release'],?resolve)
?}
]//注冊路由export?const?router?=?new?Router({
?routes:?constantRouterMap
});//異步路由（需要權(quán)限的頁面）export?const?asyncRouterMap?=?[
?{
?path:?'/resource',
?name:?'nav.Resource',
?meta:?{
?permission:?[]
?},
?component:?(resolve)?=>?require(['@/components/Resource/resource'],?resolve)
?},
?{
?path:?'/template',
?name:?'nav.Template',
?meta:?{
?permission:?[]
?},
?component:?(resolve)?=>?require(['@/components/Template/template'],?resolve)
?},
?{
?path:?'/generalSet',
?name:?'nav.System',
?meta:?{
?permission:?[]
?},
?component:?(resolve)?=>?require(['@/components/SystemSet/generalSet'],?resolve)
?},
?{
?path:?'',
?name:?'nav.Log',
?component:?App,
?children:?[
?{
?path:?'/userLog',
?name:?'nav.UserLog',
?meta:?{
?permission:?[]
?},
?component:?(resolve)?=>?require(['@/components/Log/userLog'],?resolve),
?},
?{
?path:?'/operatingLog',
?name:?'nav.SystemLog',
?meta:?{
?permission:?[]
?},
?component:?(resolve)?=>?require(['@/components/Log/operatingLog'],?resolve),
?},
?]
?}
?]
];
復(fù)制代碼

注意事項(xiàng)：這里有一個(gè)需要非常注意的地方就是 404 頁面一定要最后加載，如果放在constantRouterMap一同聲明了404，后面的所以頁面都會(huì)被攔截到404，詳細(xì)的問題見addRoutes when you've got a wildcard route for 404s does not work

2、頁面訪問權(quán)限

在開始時(shí)我們梳理了一個(gè)大致的頁面訪問權(quán)限流程。下面我們先實(shí)現(xiàn)最核心的部分：

我們首先獲取用戶權(quán)限列表，在這里我們將接觸到vuex狀態(tài)管理，官方文檔有詳細(xì)介紹，這里就不過多描述了，下面請看代碼：

//?store/index.jsimport?Axios?from?'axios'import?Vue?from?'vue'import?Vuex?from?'vuex'Vue.use(Vuex);const?axios?=?Axios.create();const?state?=?{?mode:?'login',?list:?[]
};const?getters?=?{};const?mutations?=?{?setMode:?(state,?data)?=>?{
?state.mode?=?data
?},?setList:?(state,?data)?=>?{
?state.list?=?data
?}
};const?actions?=?{?//?獲取權(quán)限列表
?getPermission({commit})?{?return?new?Promise((resolve,?reject)?=>?{
?axios({?url:?'/privilege/queryPrivilege?id='?+?sessionStorage.getItem('privId'),?methods:?'get',?headers:?{?token:?sessionStorage.getItem('token'),?name:?sessionStorage.getItem('name')
?}
?}).then((res)?=>?{?//?存儲權(quán)限列表
?commit('setList',?res.data.cust.privileges[0].children);
?resolve(res.data.cust.privileges[0].children)
?}).catch(()?=>?{
?reject()
?})
?})
?}
};export?default?new?Vuex.Store({
?state,
?mutations,
?actions,
?getters
})
復(fù)制代碼

好了，我們現(xiàn)在請求后臺拿到了權(quán)限數(shù)據(jù)，并將數(shù)據(jù)存放到了vuex中，下面我們需要利用返回?cái)?shù)據(jù)匹配之前寫的異步路由表，將匹配結(jié)果和靜態(tài)路由表結(jié)合，開成最終的實(shí)際路由表。

其中最關(guān)鍵的是利用vue-router2.2.0版本新添加的一個(gè)addRoutes方法，我們看看官方文檔如何解釋此方法的：

router.addRoutes(routes) 2.2.0+ 動(dòng)態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個(gè)符合 routes 選項(xiàng)要求的數(shù)組。

那我們現(xiàn)在就可以開始使用addRoutes進(jìn)行路由匹配了。下面看代碼：

//?router/index.js/**
?*?根據(jù)權(quán)限匹配路由
?*?@param?{array}?permission?權(quán)限列表（菜單列表）
?*?@param?{array}?asyncRouter?異步路由對象
?*/function?routerMatch(permission,?asyncRouter)?{?return?new?Promise((resolve)?=>?{?const?routers?=?[];?//?創(chuàng)建路由
?function?createRouter(permission)?{?//?根據(jù)路徑匹配到的router對象添加到routers中即可
?permission.forEach((item)?=>?{?if?(item.children?&&?item.children.length)?{
?createRouter(item.children)
?}?let?path?=?item.path;?//?循環(huán)異步路由，將符合權(quán)限列表的路由加入到routers中
?asyncRouter.find((s)?=>?{?if?(s.path?===?'')?{
?s.children.find((y)?=>?{?if?(y.path?===?path)?{
?y.meta.permission?=?item.permission;
?routers.push(s);
?}
?})
?}?if?(s.path?===?path)?{
?s.meta.permission?=?item.permission;
?routers.push(s);
?}
?})
?})
?}
?createRouter(permission)
?resolve([routers])
?})
}
復(fù)制代碼

然后我們編寫導(dǎo)航鉤子

//?router/index.jsrouter.beforeEach((to,?form,?next)?=>?{?if?(sessionStorage.getItem('token'))?{?if?(to.path?===?'/')?{
?router.replace('/index')
?}?else?{
?console.log(store.state.list.length);?if?(store.state.list.length?===?0)?{?//如果沒有權(quán)限列表，將重新向后臺請求一次
?store.dispatch('getPermission').then(res?=>?{?//調(diào)用權(quán)限匹配的方法
?routerMatch(res,?asyncRouterMap).then(res?=>?{?//將匹配出來的權(quán)限列表進(jìn)行addRoutes
?router.addRoutes(res[0]);
?next({?...to,?replace:?true?})
?})
?}).catch(()?=>?{
?router.replace('/')
?})
?}?else?{?if?(to.matched.length)?{
?next()
?}?else?{
?router.replace('/')
?}
?}
?}
?}?else?{?if?(whiteList.indexOf(to.path)?>=?0)?{
?next()
?}?else?{
?router.replace('/')
?}
?}
});
復(fù)制代碼

到這里我們已經(jīng)完成了對頁面訪問的權(quán)限控制，接下來我們來講解一下操作按扭的權(quán)限部分。

四、數(shù)據(jù)操作權(quán)限

是否還記得前面的路由配置中我們多出來的一個(gè)代碼，下面我們拿出來看看：

//異步路由（需要權(quán)限的頁面）export?const?asyncRouterMap?=?[
?{
?path:?'/resource',
?name:?'nav.Resource',
?meta:?{
?permission:?[]
?},
?component:?(resolve)?=>?require(['@/components/Resource/resource'],?resolve)
?},
?{
?path:?'/template',
?name:?'nav.Template',
?meta:?{
?permission:?[]
?},
?component:?(resolve)?=>?require(['@/components/Template/template'],?resolve)
?},
?{
?path:?'/generalSet',
?name:?'nav.System',
?meta:?{
?permission:?[]
?},
?component:?(resolve)?=>?require(['@/components/SystemSet/generalSet'],?resolve)
?},
?{
?path:?'',
?name:?'nav.Log',
?component:?App,
?children:?[
?{
?path:?'/userLog',
?name:?'nav.UserLog',
?meta:?{
?permission:?[]
?},
?component:?(resolve)?=>?require(['@/components/Log/userLog'],?resolve),
?},
?{
?path:?'/operatingLog',
?name:?'nav.SystemLog',
?meta:?{
?permission:?[]
?},
?component:?(resolve)?=>?require(['@/components/Log/operatingLog'],?resolve),
?},
?]
?}
?]
];
復(fù)制代碼

為每個(gè)路由頁面增加meta字段。在routerMatch函數(shù)中將匹配到的詳細(xì)權(quán)限字段賦值到這里。這樣在每個(gè)頁面的route對象中就會(huì)得到這個(gè)字段。

asyncRouter.find((s)?=>?{?if?(s.path?===?'')?{
?s.children.find((y)?=>?{?if?(y.path?===?path)?{
?//賦值
?y.meta.permission?=?item.permission;
?routers.push(s);
?}
?})
?}?if?(s.path?===?path)?{
?s.meta.permission?=?item.permission;
?routers.push(s);
?}
?})
復(fù)制代碼

接下來我們編寫一個(gè)vue自定義指令對頁面中需要進(jìn)行鑒權(quán)的元素進(jìn)行判斷，比如類似這樣的：

?/*?3代表一個(gè)上傳權(quán)限的ID，權(quán)限中有3則顯示按鈕?*/復(fù)制代碼

我們直接注冊一個(gè)全局指令，利用vnode來訪問vue的方法。代碼如下：

//main.js//按扭權(quán)限指令Vue.directive('allow',?{?inserted:?(el,?binding,?vnode)?=>?{?let?permissionList?=?vnode.context.$route.meta.permission;?if?(!permissionList.includes(binding.value))?{
?el.parentNode.removeChild(el)
?}
?}
})
復(fù)制代碼

至此為止，權(quán)限控制流程就已經(jīng)完全結(jié)束了，在最后我們再看一下完整的權(quán)限控制流程圖吧.

五、路由控制完整流程圖