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

需求

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

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

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

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

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

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

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

实现

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

• 1.考虑选用哪种守卫（全局、路由独享）
• 2.如何判断当前用户是否为管理员用户
• 3.怎么获取用户信息

刚开始总觉得没有必要去添加全局守卫，然后尝试使用路由守卫去做。由于项目在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导航获取用户信息的资料请关注脚本之家其它相关文章！