Vue布置導航守衛(wèi)獲取用戶信息
需求
在工作中遇到了管理員配置角色菜單的需求：
假設，用戶登陸系統(tǒng)后有一個系統(tǒng)管理模塊，而點擊系統(tǒng)管理默認被定位到角色管理菜單。
但是要求除管理員外的其他用戶不展示角色管理菜單。
管理員通過設置，向后端傳遞的值中不包含角色管理（設置后端路由，取消其他用戶的角色管理菜單）。
此時其他用戶登陸并進入系統(tǒng)管理模塊后不展示角色管理菜單，但內(nèi)容仍是角色管理頁面（因為默認定位到角色管理）；
此時需要前端對路由進行限制，這就需要用到守衛(wèi)。
守衛(wèi)的作用是將管理員用戶定位到角色管理頁面，其它用戶定位到其它頁面。
實現(xiàn)
在實現(xiàn)時遇到了一些問題：
- 1.考慮選用哪種守衛(wèi)（全局、路由獨享）
- 2.如何判斷當前用戶是否為管理員用戶
- 3.怎么獲取用戶信息
剛開始總覺得沒有必要去添加全局守衛(wèi)，然后嘗試使用路由守衛(wèi)去做。由于項目在vuex中存儲了用戶信息，所以在路由獨享守衛(wèi)中嘗試使用$store去拿，結(jié)果并拿不到。
然后使用全局守衛(wèi)，同樣的方式拿用戶信息，發(fā)現(xiàn)也不行。后來上網(wǎng)找解決方案。結(jié)果就是，先給Vue實例來個變量名，方便在守衛(wèi)中獲取它。然后再vue實例中通過$store的方式拿到用戶信息。
代碼如下
main.js
router.beforeEach((to, from, next) => {
if (to.path === "/system/base/role") {
if (vue.$store.state.userInfo.roleInfoList[0].roleCode !== "admin") {~~~~
next({path: "/system/target/std"})
}
}
next()
})
let vue = new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");Keep foolish, keep hungry.
以上就是Vue布置導航守衛(wèi)獲取用戶信息的詳細內(nèi)容，更多關于Vue導航獲取用戶信息的資料請關注腳本之家其它相關文章！
相關文章
vue中element-ui表格縮略圖懸浮放大功能的實例代碼
element-ui界面非常簡潔和美觀，提供的組件可以滿足絕大多數(shù)的應用場景，當表格中顯示了圖片的縮略圖時，想要鼠標浮動在縮略圖上時放大圖片的效果，該如何實現(xiàn)呢？下面小編通過實例代碼給大家介紹vue中element-ui表格縮略圖懸浮放大功能，一起看看吧2018-06-06
這篇文章主要介紹了使用vue-upload上傳圖片的詳細使用說明，文中有相關的代碼示例供大家參考，感興趣的小伙伴一起跟著小編來學習吧2023-05-05
這篇文章主要介紹了8個非常實用的Vue自定義指令，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue動態(tài)綁定多個類名方法詳解(:class動態(tài)綁定多個類名)
vue中可以通過:class=""這樣來根據(jù)一定的條件來動態(tài)添加class,但是有時候需要判斷的條件比較多,需要動態(tài)添加的class也比較多,下面這篇文章主要給大家介紹了關于vue動態(tài)綁定多個類名(:class動態(tài)綁定多個類名)的相關資料,需要的朋友可以參考下2022-11-11
vue項目動態(tài)渲染input,綁定的參數(shù)不實時更新問題
這篇文章主要介紹了vue項目動態(tài)渲染input,綁定的參數(shù)不實時更新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vscode中開發(fā)VUE項目的調(diào)試實現(xiàn)方案
本文詳細介紹了如何在VSCode中進行Vue前端開發(fā)和調(diào)試,包括必備插件安裝、VSCode配置、調(diào)試方案（瀏覽器調(diào)試、VueDevTools、Console調(diào)試）、常用快捷鍵和調(diào)試最佳實踐,適合Vue3+TypeScript項目的開發(fā)調(diào)試2025-10-10
Vue3動態(tài)ref在組件卸載后保留key,值置為null,需手動檢查null以避免錯誤,不可刪除key,此為設計行為,旨在維護響應式結(jié)構(gòu)完整性及性能優(yōu)化2025-07-07
這篇文章主要介紹了ant-design表單處理和常用方法及自定義驗證操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vuex 進階之模塊化組織詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
在Vue開發(fā)過程中,開發(fā)者經(jīng)常會遇到一個令人困擾的問題：頁面樣式需要刷新后才能正確顯示,否則會出現(xiàn)樣式混亂,布局錯位等問題,本文將全面分析這一問題的根源,并提供系統(tǒng)的解決方案2025-05-05