【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.