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 el-table组件自定义合计(summary-method)的坑
这篇文章主要介绍了vue element-ui el-table组件自定义合计(summary-method)的坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要为大家详细介绍了vue router路由嵌套不显示的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下vue-router 路由嵌套不显示问题2017-06-06
Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,下面这篇文章主要给大家介绍了关于程序员应该知道的vuex冷门小技巧的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了解决vue项目打包上服务器显示404错误,本地没出错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue项目之页面class不生效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要为大家详细介绍了vue日期时间工具类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了Vuex状态管理器的使用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了Vue.js组件通信之自定义事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
详解vue2.0 transition 多个元素嵌套使用过渡
这篇文章主要介绍了详解vue2.0 transition 多个元素嵌套使用过渡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
本文主要介绍了vue el-pagination分页查询封装的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
最新评论