共计 757 个字符，预计需要花费 2 分钟才能阅读完成。
需要
在工作中遇到了管理员配置角色菜单的需要：假如，用户登陆零碎后有一个系统管理模块，而点击系统管理默认被定位到角色治理菜单。然而要求除管理员外的其余用户不展现角色治理菜单。管理员通过设置，向后端传递的值中不蕴含角色治理（设置后端路由，勾销其余用户的角色治理菜单）。此时其余用户登陆并进入系统管理模块后不展现角色治理菜单，但内容仍是角色治理页面（因为默认定位到角色治理）；此时须要前端对路由进行限度，这就须要用到守卫。守卫的作用是将管理员用户定位到角色治理页面，其它用户定位到其它页面。
实现
在实现时遇到了一些问题：
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.
正文完
