Vue布置导航守卫获取用户信息
更新时间：2023年08月11日 11:19:05 作者：野望
这篇文章主要为大家介绍了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导航获取用户信息的资料请关注脚本之家其它相关文章！
相关文章
vue中element-ui表格缩略图悬浮放大功能的实例代码
element-ui界面非常简洁和美观，提供的组件可以满足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？下面小编通过实例代码给大家介绍vue中element-ui表格缩略图悬浮放大功能，一起看看吧2018-06-06
这篇文章主要介绍了使用vue-upload上传图片的详细使用说明，文中有相关的代码示例供大家参考，感兴趣的小伙伴一起跟着小编来学习吧2023-05-05
这篇文章主要介绍了8个非常实用的Vue自定义指令，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
vue动态绑定多个类名方法详解(:class动态绑定多个类名)
vue中可以通过:class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,下面这篇文章主要给大家介绍了关于vue动态绑定多个类名(:class动态绑定多个类名)的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue项目动态渲染input,绑定的参数不实时更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文详细介绍了如何在VSCode中进行Vue前端开发和调试,包括必备插件安装、VSCode配置、调试方案（浏览器调试、VueDevTools、Console调试）、常用快捷键和调试最佳实践,适合Vue3+TypeScript项目的开发调试2025-10-10
Vue3动态ref在组件卸载后保留key,值置为null,需手动检查null以避免错误,不可删除key,此为设计行为,旨在维护响应式结构完整性及性能优化2025-07-07
这篇文章主要介绍了ant-design表单处理和常用方法及自定义验证操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vuex 进阶之模块化组织详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
在Vue开发过程中,开发者经常会遇到一个令人困扰的问题：页面样式需要刷新后才能正确显示,否则会出现样式混乱,布局错位等问题,本文将全面分析这一问题的根源,并提供系统的解决方案2025-05-05
最新评论