Vue布置導航守衛(wèi)獲取用戶信息
更新時間：2023年08月11日 11:19:05 作者：野望
這篇文章主要為大家介紹了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去拿，結果并拿不到。
然后使用全局守衛(wèi)，同樣的方式拿用戶信息，發(fā)現(xiàn)也不行。后來上網(wǎng)找解決方案。結果就是，先給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 el-table組件自定義合計(summary-method)的坑
這篇文章主要介紹了vue element-ui el-table組件自定義合計(summary-method)的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家詳細介紹了vue router路由嵌套不顯示的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問題2017-06-06
Vue基本用法很容易上手,但是有很多優(yōu)化的寫法你就不一定知道了,下面這篇文章主要給大家介紹了關于程序員應該知道的vuex冷門小技巧的相關資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了解決vue項目打包上服務器顯示404錯誤,本地沒出錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue項目之頁面class不生效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細介紹了vue日期時間工具類，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了Vuex狀態(tài)管理器的使用,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了Vue.js組件通信之自定義事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
詳解vue2.0 transition 多個元素嵌套使用過渡
這篇文章主要介紹了詳解vue2.0 transition 多個元素嵌套使用過渡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本文主要介紹了vue?el-pagination分頁查詢封裝的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06