位置: IT常識(shí) - 正文
前端權(quán)限控制（一）：前端權(quán)限管理及動(dòng)態(tài)路由配置方案(前端權(quán)限控制實(shí)戰(zhàn))
編輯：rootadmin推薦整理分享前端權(quán)限控制（一）：前端權(quán)限管理及動(dòng)態(tài)路由配置方案(前端權(quán)限控制實(shí)戰(zhàn))，希望有所幫助，僅作參考，歡迎閱讀內(nèi)容。
文章相關(guān)熱門(mén)搜索詞:前端權(quán)限控制怎么做,前端權(quán)限控制按鈕,前端權(quán)限控制,前端權(quán)限控制方案,前端權(quán)限控制實(shí)戰(zhàn),前端權(quán)限控制,前端權(quán)限控制面試題,前端權(quán)限控制面試題,內(nèi)容如對(duì)您有幫助，希望把文章鏈接給更多的朋友！
在項(xiàng)目中，尤其是在后臺(tái)管理系統(tǒng)中，不同人員登陸，看到的頁(yè)面菜單是不一樣的，比如，一個(gè)公司的辦公系統(tǒng)，超級(jí)管理員登陸可以看到所有的頁(yè)面，而普通員工賬號(hào)登錄可能無(wú)法看到人員管理等頁(yè)面，比如公司的員工個(gè)人資料頁(yè)面只有人力資源部門(mén)有權(quán)利看，其他部門(mén)的員工是不允許查看公司員工信息數(shù)據(jù)的。當(dāng)然了除了頁(yè)面的權(quán)限，還會(huì)有一些按鈕級(jí)別的權(quán)限，比如一個(gè)下載按鈕，有的帳號(hào)可以用，有的人不能用，比如人員賬號(hào)管理中，一個(gè)頁(yè)面中有一個(gè)確認(rèn)添加、刪除該賬號(hào)人員按鈕，這個(gè)按鈕只有管理員有權(quán)利點(diǎn)擊，其他人員登陸是無(wú)法點(diǎn)擊的。
頁(yè)面級(jí)權(quán)限控制當(dāng)前系統(tǒng)方案為：前端路由信息完全寫(xiě)死，并且動(dòng)態(tài)生成頁(yè)面菜單。自己本身的router.js文件定義好頁(yè)面所有的路由。這種方式弊端很明顯，并不能實(shí)現(xiàn)真正的權(quán)限控制，因?yàn)槿绻脩?hù)記住了某個(gè)理由，用戶(hù)不點(diǎn)擊菜單，直接在地址欄里輸入地址，那么頁(yè)面還是可以顯示出來(lái)。
所有方案前提：登錄成功后后臺(tái)返回當(dāng)前登錄用戶(hù)權(quán)限code（或者name、role，名稱(chēng)溝通后自定義），前端存儲(chǔ)在vuex中。
方案一：前端只在路由跳轉(zhuǎn)時(shí)做權(quán)限判斷。
方案一改動(dòng)當(dāng)前代碼量最小，無(wú)需后端改動(dòng)，前端路由和側(cè)邊欄顯示不變，在對(duì)需要權(quán)限區(qū)分的路由在跳轉(zhuǎn)時(shí)候添加前置路由守衛(wèi)router.beforeEach，進(jìn)行當(dāng)前權(quán)限判斷，不滿(mǎn)足權(quán)限的跳轉(zhuǎn)到相應(yīng)頁(yè)面（自定義401、404頁(yè)面等），但該方案不能實(shí)現(xiàn)真正的權(quán)限控制。
router.beforeEach((to, from, next) =>?{? ? if?(store.getters.roles.length?=== 0) { // 判斷是否保存有權(quán)限信息? ? ? const?roles?= store.getters.roles;? ? ? if?(roles?!== 'admin') { // 不為管理員? ? ? ? if?(to.path?=== '/faultInfo') {? ? ? ? ? next({ path:?'/401'?})? ? ? ? } else?{? ? ? ? ? next()? ? ? ? } ? ? ? ?? ? ? } else?{? ? ? ? next()? ? ? }? ? } else?{? ? ? next('/login');? ? }});方案二：后端返回路由權(quán)限名，前端存儲(chǔ)完整路由權(quán)限表，并動(dòng)態(tài)生成路由。
建議看大神的文檔，已經(jīng)寫(xiě)的很詳細(xì)了：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇) - 掘金
以下是自己實(shí)現(xiàn)思路：
建議登錄login和返回用戶(hù)路由信息get_user_info兩件事分開(kāi)請(qǐng)求比較好。
步驟：
· ?登錄：當(dāng)用戶(hù)填寫(xiě)完賬號(hào)和密碼后向服務(wù)端驗(yàn)證是否正確，驗(yàn)證通過(guò)之后，服務(wù)端會(huì)返回一個(gè)token，拿到token之后（將這個(gè)token存貯到cookie中，保證刷新頁(yè)面后能記住用戶(hù)登錄狀態(tài)），前端會(huì)根據(jù)token再去拉取一個(gè) user_info 的接口來(lái)獲取用戶(hù)的詳細(xì)信息（如用戶(hù)權(quán)限，用戶(hù)名等等信息）。
·??權(quán)限驗(yàn)證：通過(guò)token獲取用戶(hù)對(duì)應(yīng)的 role，動(dòng)態(tài)根據(jù)用戶(hù)的 role 算出其對(duì)應(yīng)有權(quán)限的路由，通過(guò) router.addRoutes 動(dòng)態(tài)掛載這些路由。
數(shù)據(jù)和操作都可存儲(chǔ)至vuex全局管理。(刷新頁(yè)面后 vuex的內(nèi)容也會(huì)丟失，所以需要重復(fù)get_user_info的操作)
權(quán)限控思路：前端會(huì)有一份路由表，它表示了每一個(gè)路由可訪(fǎng)問(wèn)的權(quán)限。當(dāng)用戶(hù)登錄之后，通過(guò)?token?獲取用戶(hù)的?role?，動(dòng)態(tài)根據(jù)用戶(hù)的?role?算出其對(duì)應(yīng)有權(quán)限的路由，再通過(guò)router.addRoutes動(dòng)態(tài)掛載路由。
創(chuàng)建vue實(shí)例的時(shí)候?qū)ue-router掛載，但這個(gè)時(shí)候vue-router掛載一些登錄或者不用權(quán)限的公用的頁(yè)面。當(dāng)用戶(hù)登錄后，獲取用role，將role和路由表每個(gè)頁(yè)面的需要的權(quán)限作比較，生成最終用戶(hù)可訪(fǎng)問(wèn)的路由表。調(diào)用router.addRoutes(store.getters.addRouters)添加用戶(hù)可訪(fǎng)問(wèn)的路由。使用vuex管理路由表，根據(jù)vuex中可訪(fǎng)問(wèn)的路由渲染側(cè)邊欄組件。方案二開(kāi)始，路由分為兩種：constantRoutes?和?asyncRoutes。
constantRoutes：?代表那些不需要?jiǎng)討B(tài)判斷權(quán)限的路由，如登錄頁(yè)、404、等通用頁(yè)面。
asyncRoutes：?代表那些需求動(dòng)態(tài)判斷權(quán)限并通過(guò)?addRoutes?動(dòng)態(tài)添加的頁(yè)面。
//固定路由const?constantRoutes? = [? {? ? path:?'/',? ? redirect:?'/login',? },? {? ? path:?'/login',? ? name:?'登錄頁(yè)面',? ? component:?()=>import("@/views/login.vue")? },? {? ? path:?'/404',? ? name:?'404頁(yè)面',? ? component:?()=>import("@/views/404.vue")? },? {? ? path:?'/401',? ? name:?'401頁(yè)面',? ? component:?()=>import("@/views/401.vue")? },]需要權(quán)限路由：字段roles，表示當(dāng)前路由所需要的權(quán)限。
// 需要權(quán)限路由export?const?asyncRoutes?= [? {? ? path:?'/permission',? ? name:?'permissionhome',? ? meta:?{? ? ? icon:?'el-icon-setting',? ? ? roles:?['admin','superadmin']? ? },? ? component:?()=>import("@/views/permission.vue")?},?{? ? path:?'/detail',? ? name:?'detail',? ? meta:?{? ? ? icon:?'el-icon-setting',? ? ? roles:?['superadmin']? ? },? ? component:?()=>import("@/views/detail.vue")?},使用addRoutes方法動(dòng)態(tài)添加路由并進(jìn)行權(quán)限判斷：
// main.jsconst?whiteList?= ['/login'] // 免登陸頁(yè)面router.beforeEach((to, from, next) =>?{? if?(store.getters.token) { // 判斷是否有token? ? if?(to.path?=== '/login') {? ? ? next({ path:?'/'?});? ? } else?{? ? ? if?(store.getters.roles.length?=== 0) { // 判斷用戶(hù)是否游user_info信息? ? ? ? store.dispatch('GetInfo').then(res?=>?{ // 獲取info? ? ? ? ? const?roles?= res.data.role;? ? ? ? ? store.dispatch('GenerateRoutes', { roles?}).then(() =>?{ // 生成可訪(fǎng)問(wèn)的路由表? ? ? ? ? ? router.addRoutes(store.getters.addRouters) // 動(dòng)態(tài)添加可訪(fǎng)問(wèn)路由表? ? ? ? ? ?next({ ...to, replace:?true?}) // hack方法 確保addRoutes已完成? ? ? ? }).catch(err?=>?{? ? ? ? ? console.log(err);? ? ? ? });? ? ? } else?{? ? ? ? next() //當(dāng)有用戶(hù)權(quán)限的時(shí)候，說(shuō)明所有可訪(fǎng)問(wèn)路由已生成 如訪(fǎng)問(wèn)沒(méi)權(quán)限的全面會(huì)自動(dòng)進(jìn)入404頁(yè)面? ? ? }? ? }? } else?{? ? if?(whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單，直接進(jìn)入? ? ? next();? ? } else?{? ? ? next('/login'); // 否則全部重定向到登錄頁(yè)? ? }? }});方案三：登陸成功之后直接由后端返回異步路由表，然后前端直接通過(guò)addRoutes方法添加。前端添加用戶(hù)頁(yè)面權(quán)限配置頁(yè)面。
實(shí)現(xiàn)方式應(yīng)該跟方案二差不多，具體實(shí)現(xiàn)還需跟后端人員溝通討論。
實(shí)現(xiàn)步驟：前端權(quán)限控制（二）：VUE-router.addRoutes根據(jù)后臺(tái)接口傳遞數(shù)據(jù)生成動(dòng)態(tài)路由，前端拿到配置并生成側(cè)邊欄-實(shí)現(xiàn)頁(yè)面級(jí)權(quán)限控制
按鈕級(jí)權(quán)限控制方案一：在獲取到用戶(hù)的role之后，在前端用v-if手動(dòng)判斷來(lái)區(qū)分不同權(quán)限對(duì)應(yīng)的按鈕的?；蛘邔⑺庋b成一個(gè)自定義指令使用。
方案二：在頁(yè)面級(jí)權(quán)限控制方案三基礎(chǔ)上來(lái)操作，后端返回異步路由表中添加頁(yè)面按鈕權(quán)限字段，前端根據(jù)返回表來(lái)顯示操作按鈕。
具體實(shí)現(xiàn)：前端權(quán)限控制（三）：根據(jù)后臺(tái)接口數(shù)據(jù)傳遞頁(yè)面按鈕權(quán)限-實(shí)現(xiàn)按鈕級(jí)權(quán)限控制
方案三：不同權(quán)限的用戶(hù)顯示不同的側(cè)邊欄和限制其所能進(jìn)入的頁(yè)面，后端驗(yàn)證每一個(gè)涉及請(qǐng)求的操作，驗(yàn)證其是否有該操作的權(quán)限，每一個(gè)后臺(tái)的請(qǐng)求 get 或者 post 前端都在請(qǐng)求 header里面攜帶用戶(hù)的 token，后端根據(jù)該 token 來(lái)驗(yàn)證用戶(hù)是否有權(quán)限執(zhí)行該操作。若沒(méi)有權(quán)限則拋出一個(gè)對(duì)應(yīng)的狀態(tài)碼，前端檢測(cè)到該狀態(tài)碼，做出相對(duì)應(yīng)的操作。
上一篇：基于Web的疫情防控管理系統(tǒng)(基于web的疫情防控方案)
下一篇：微信小程序 | 人臉識(shí)別的最終解決方案(微信小程序人民法院審核通過(guò)多久立案)
