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导航获取用户信息的资料请关注脚本之家其它相关文章!
相关文章
详解让sublime text3支持Vue语法高亮显示的示例
本篇文章主要介绍了让sublime text3支持Vue语法高亮显示的示例,非常具有实用价值,需要的朋友可以参考下2017-09-09
最新评论