在項(xiàng)目當(dāng)中卿啡，角色的權(quán)限管理是卡了挺久的一個(gè)難點(diǎn)吟吝。首先我們確定的權(quán)限控制分為兩大部分，其中根據(jù)粒的大小分的更細(xì)：1颈娜、接口訪問(wèn)的權(quán)限控制剑逃；2、頁(yè)面的權(quán)限控制：①菜單中的頁(yè)面是否能被訪問(wèn)官辽；②頁(yè)面中的按鈕（增蛹磺、刪、改）的權(quán)限控制是否顯示同仆。接口權(quán)限就是對(duì)用戶(hù)的校驗(yàn)萤捆。正常來(lái)說(shuō)，在用戶(hù)登錄時(shí)服務(wù)器需要給前臺(tái)返回一個(gè)Token,然后在以后前臺(tái)每次調(diào)用接口時(shí)都需要帶上這個(gè)Token,然后服務(wù)端獲取到這個(gè)Token后進(jìn)行比對(duì)，如果通過(guò)則可以訪問(wèn)”詈洌現(xiàn)有的做法是在登錄成功的回調(diào)中將后臺(tái)返回的Token直接存儲(chǔ)到sessionStorage，然在請(qǐng)求時(shí)將Token取出放入headers中傳給后臺(tái)扶镀，代碼如下：
后來(lái)發(fā)現(xiàn)axios可以在攔截器中直接將Token塞入config.headers.Authorization中蕴侣，作為全局傳入。下面是代碼部分：
頁(yè)面權(quán)限控制又分為兩種：1臭觉、菜單中的頁(yè)面是否能被訪問(wèn)昆雀；2、頁(yè)面中的按鈕（增蝠筑、刪狞膘、改）的權(quán)限控制是否顯示。這些權(quán)限一般是在固定頁(yè)面進(jìn)行配置什乙，保存后記錄到數(shù)據(jù)庫(kù)中挽封。按鈕權(quán)限暫且不提，頁(yè)面訪問(wèn)權(quán)限在實(shí)現(xiàn)中又可以分為兩種方式：1臣镣、顯示所有菜單辅愿，當(dāng)用戶(hù)訪問(wèn)不在自己權(quán)限內(nèi)的菜單時(shí)，提示權(quán)限不足忆某；2点待、只顯示當(dāng)前用戶(hù)能訪問(wèn)的權(quán)限內(nèi)菜單，如果用戶(hù)通過(guò)URL進(jìn)行強(qiáng)制訪問(wèn)弃舒，則會(huì)直接進(jìn)入404癞埠。
創(chuàng)建路由表實(shí)際上沒(méi)有什么難度，但是因?yàn)橛胁糠猪?yè)面是不需要訪問(wèn)權(quán)限的聋呢，所以需要將登錄苗踪、404、維護(hù)等頁(yè)面寫(xiě)到默認(rèn)的路由中坝冕，而將其它的需要權(quán)限的頁(yè)面寫(xiě)到一個(gè)變量或者一個(gè)文件中徒探，這樣可以有效的減輕后續(xù)的維護(hù)壓力。下面將index.js的代碼貼上喂窟，異步路由將適量減少测暗，以免占過(guò)多篇幅。
頁(yè)面訪問(wèn)權(quán)限在開(kāi)始時(shí)我們梳理了一個(gè)大致的頁(yè)面訪問(wèn)權(quán)限流程磨澡，我們首先獲取用戶(hù)權(quán)限列表碗啄，在這里我們將接觸到vuex狀態(tài)管理，下面請(qǐng)看代碼：
我們現(xiàn)在請(qǐng)求后臺(tái)拿到了權(quán)限數(shù)據(jù)稳摄，并將數(shù)據(jù)存放到了vuex中稚字，下面我們需要利用返回?cái)?shù)據(jù)匹配之前寫(xiě)的異步路由表，將匹配結(jié)果和靜態(tài)路由表結(jié)合，開(kāi)成最終的實(shí)際路由表胆描。其中最關(guān)鍵的是利用vue-router2.2.0版本新添加的一個(gè)addRoutes方法瘫想，那我們現(xiàn)在就可以開(kāi)始使用addRoutes進(jìn)行路由匹配了。下面看代碼：
然后我們編寫(xiě)導(dǎo)航鉤子
到這里我們已經(jīng)完成了對(duì)頁(yè)面訪問(wèn)的權(quán)限控制昌讲，接下來(lái)我們來(lái)看操作按鈕的數(shù)據(jù)操作權(quán)限
為每個(gè)路由頁(yè)面增加meta字段国夜。在routerMatch函數(shù)中將匹配到的詳細(xì)權(quán)限字段賦值到這里。這樣在每個(gè)頁(yè)面的route對(duì)象中就會(huì)得到這個(gè)字段短绸。
接下來(lái)我們直接注冊(cè)一個(gè)全局指令车吹，利用vnode來(lái)訪問(wèn)vue的方法。代碼如下：
至此為止醋闭，權(quán)限控制流程就已經(jīng)完全結(jié)束窄驹。
