vue 許可權管理

2021-08-30 13:59:28 字數 2820 閱讀 1010

今天來說說許可權管理,因為網上已經有很多關於這方面的很多內容,博主也是借鑑了網上的一些邏輯來寫的,主要也是說說前端實現許可權管理的乙個思路,也是作為自己日後面對這樣的問題的乙個解決方案。

首先需要了解的就是純前端是無法實現許可權管理的,vue的許可權管理主要是基於路由實現的,當然這樣的許可權管理完全可以被繞過去的,而之所以在前端這麼做,更多是為了使用者體驗,節省不必要的載入開銷等等。

用vue來實現許可權管理,主要就是基於這個新的vue的api,addroutes的方法來實現的,當然許可權管理也分為幾個方面,博主今天主要就是說的頁面級的許可權,思路就是利用剛剛說的api來動態載入路由,我們將路由分為兩個部分,乙個是公共部分,即所有人都能看到的路由,另外一部分則是動態載入部分,這裡也簡單的將**貼出來,大家參考一下就可以,網上的**也是有很多

import vue from 'vue'

import router from 'vue-router'

vue.use(router)

export const constroutermap = [

, component: () => import('@/views/login.vue')

},, component: () => import('@/views/homepage.vue')},,

component: () => import('@/views/about.vue')},,

component: () => import('@/views/aboutauthor.vue')},,

component: () => import('@/views/weatherfore.vue')},,

component: () => import('@/views/dynamictable.vue')},,

component: () => import('@/views/tablegrid.vue')}]

}

]export const asyncroutermap = [},}

]},

, ]export default new router()

看到這個**應該知道,我們首先是先載入公共路由部分,然後再根據vue-router提供的路由導航鉤子,當路由進行跳轉的時候,向伺服器請求使用者的角色許可權

import router from './router'

import store from '@/store/index'

import from 'element-ui'

const whitelist = ['/login']

router.beforeeach((to, from, next) => else )

.then(() => )

}).catch(err => )

})} else

}} else else

}})

這裡後台博主用了thinkjs的框架,博主現在還在整理,後續整理好,也會上傳到github上面。在這個導航鉤子上,我們利用了vuex來儲存角色資訊,每次登陸會進行判斷,如果沒有角色資訊,就會去觸發action來請求伺服器,伺服器返回角色欄位後,我們將他存在store裡面。另外根據上面的路由,我們將頁面許可權需要的角色放在路由的meta欄位中,所以當我們拿到角色資訊後,會和動態路由中的meta進行一一對比,需要注意的是,當路由有巢狀的children屬性時,我們還需要將children裡面的路由拿出來一一進行遞迴對比,這樣如果伺服器的角色資訊,符合路由需要的許可權,我們就將這個路由記錄下來,最後組成需要新增的路由,利用addroutes來形成最終的路由。

generateroute (, data)  else 

// console.log(accessrouters)

commit('set_routers', accessrouters)

commit('set_roles', roles)

resolve()

})},

function haspermission (roles, route)  else 

}function filterasyncrouter (asyncrouter, roles)

return true

}return false

})// console.log(accessrouters)

return accessrouters

}

結合前面的導航鉤子就形成了最終的路由,當使用者試圖訪問不存在的路由的時候,則會返回404頁面,另外也簡單的說下按鈕及頁面中檢視顯示的許可權,其實也是利用了vue的自定義指令,我們給自定義指令傳入需要的角色許可權陣列,然後和儲存在store中的許可權作對比,如果沒有許可權,則移除當前的dom元素

import store from '@/store/index'

const permission = = binding

const roles = store.getters && store.getters.roles

if (value && value instanceof array && value.length > 0) )

if (!haspermission)

} else

}}export default permission

這些**都是博主自己寫的專案中的片段,完整的**,大家有興趣可以去github上面檢視。之前寫的許可權沒有問題,但是重新整理的時候,突然發現許可權需要重新整理的時候才會生效,技術有限,所以要是有同學發現**有什麼問題,可以隨時告訴博主,當然博主也是會繼續踩坑下去,解決這個問題。

Vue許可權管理

博主最近剛剛上手乙個圖書管理系統的小demo,在編寫的過程中遇到了許多的問題,尤其是對於我這樣的新手來說許可權管理是乙個難點,本身對vue就不是很理解,所以查閱了許多的文章後才有一點點思路,所以在這裡記錄下來,也希望其他的小白也能夠少走一些彎路。我大概的思路是這樣的 首先,我們我們有兩種使用者,乙個...

Vue後台許可權管理

許可權是對特定資源的訪問許可,所謂許可權控制,也就是確保使用者只能訪問被分配的資源 而前端許可權總的來說是請求許可權 請求的發起可能有下面兩種形式觸發 總的來說 所有的請求發起都觸發自前端路由或試圖 所以我們可以從這兩個方面入手 對觸發許可權的源頭進行控制 最終要實現目標是 前端許可權控制可以分為 ...

vue 需求 許可權管理

1 全域性註冊元件 vue.directive arrowbtn 使用自定義指令 編輯 獲取角色擁有的頁面許可權 const await store.dispatch user getinfo 篩選有顯示許可權的頁面 const filterroutes asyncroutes.filter ite...