vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue导航获取用户信息

Vue布置导航守卫获取用户信息

作者:野望

这篇文章主要为大家介绍了Vue布置导航守卫获取用户信息,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

需求

在工作中遇到了管理员配置角色菜单的需求:

假设,用户登陆系统后有一个系统管理模块,而点击系统管理默认被定位到角色管理菜单。

但是要求除管理员外的其他用户不展示角色管理菜单。

管理员通过设置,向后端传递的值中不包含角色管理(设置后端路由,取消其他用户的角色管理菜单)。

此时其他用户登陆并进入系统管理模块后不展示角色管理菜单,但内容仍是角色管理页面(因为默认定位到角色管理);

此时需要前端对路由进行限制,这就需要用到守卫。

守卫的作用是将管理员用户定位到角色管理页面,其它用户定位到其它页面。

实现

在实现时遇到了一些问题:

刚开始总觉得没有必要去添加全局守卫,然后尝试使用路由守卫去做。由于项目在vuex中存储了用户信息,所以在路由独享守卫中尝试使用$store去拿,结果并拿不到。

然后使用全局守卫,同样的方式拿用户信息,发现也不行。后来上网找解决方案。结果就是,先给Vue实例来个变量名,方便在守卫中获取它。然后再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布置导航守卫获取用户信息的详细内容,更多关于Vue导航获取用户信息的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文