Vue布置導(dǎo)航守衛(wèi)獲取用戶信息
需求
在工作中遇到了管理員配置角色菜單的需求：
假設(shè)，用戶登陸系統(tǒng)后有一個(gè)系統(tǒng)管理模塊，而點(diǎn)擊系統(tǒng)管理默認(rèn)被定位到角色管理菜單。
但是要求除管理員外的其他用戶不展示角色管理菜單。
管理員通過(guò)設(shè)置，向后端傳遞的值中不包含角色管理（設(shè)置后端路由，取消其他用戶的角色管理菜單）。
此時(shí)其他用戶登陸并進(jìn)入系統(tǒng)管理模塊后不展示角色管理菜單，但內(nèi)容仍是角色管理頁(yè)面（因?yàn)槟J(rèn)定位到角色管理）；
此時(shí)需要前端對(duì)路由進(jìn)行限制，這就需要用到守衛(wèi)。
守衛(wèi)的作用是將管理員用戶定位到角色管理頁(yè)面，其它用戶定位到其它頁(yè)面。
實(shí)現(xiàn)
在實(shí)現(xiàn)時(shí)遇到了一些問(wèn)題：
- 1.考慮選用哪種守衛(wèi)（全局、路由獨(dú)享）
- 2.如何判斷當(dāng)前用戶是否為管理員用戶
- 3.怎么獲取用戶信息
剛開(kāi)始總覺(jué)得沒(méi)有必要去添加全局守衛(wèi)，然后嘗試使用路由守衛(wèi)去做。由于項(xiàng)目在vuex中存儲(chǔ)了用戶信息，所以在路由獨(dú)享守衛(wèi)中嘗試使用$store去拿，結(jié)果并拿不到。
然后使用全局守衛(wèi)，同樣的方式拿用戶信息，發(fā)現(xiàn)也不行。后來(lái)上網(wǎng)找解決方案。結(jié)果就是，先給Vue實(shí)例來(lái)個(gè)變量名，方便在守衛(wèi)中獲取它。然后再vue實(shí)例中通過(guò)$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布置導(dǎo)航守衛(wèi)獲取用戶信息的詳細(xì)內(nèi)容，更多關(guān)于Vue導(dǎo)航獲取用戶信息的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue element-ui el-table組件自定義合計(jì)(summary-method)的坑
這篇文章主要介紹了vue element-ui el-table組件自定義合計(jì)(summary-method)的坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue router路由嵌套不顯示的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問(wèn)題2017-06-06
程序員應(yīng)該知道的vuex冷門(mén)小技巧(超好用)
Vue基本用法很容易上手,但是有很多優(yōu)化的寫(xiě)法你就不一定知道了,下面這篇文章主要給大家介紹了關(guān)于程序員應(yīng)該知道的vuex冷門(mén)小技巧的相關(guān)資料,需要的朋友可以參考下2022-05-05
解決vue項(xiàng)目打包上服務(wù)器顯示404錯(cuò)誤,本地沒(méi)出錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目打包上服務(wù)器顯示404錯(cuò)誤,本地沒(méi)出錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue項(xiàng)目之頁(yè)面class不生效問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目之頁(yè)面class不生效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue日期時(shí)間工具類(lèi)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了Vuex狀態(tài)管理器的使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了Vue.js組件通信之自定義事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
詳解vue2.0 transition 多個(gè)元素嵌套使用過(guò)渡
這篇文章主要介紹了詳解vue2.0 transition 多個(gè)元素嵌套使用過(guò)渡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue?el-pagination分頁(yè)查詢(xún)封裝的示例代碼
本文主要介紹了vue?el-pagination分頁(yè)查詢(xún)封裝的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06