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自定义名称下载PDF的方法

    Vue自定义名称下载PDF的方法

    这篇文章主要介绍了Vue自定义名称下载PDF,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • vue移动端路由切换实例分析

    vue移动端路由切换实例分析

    本篇文章给大家分享了vue移动端路由切换实例以及相关知识点,对此有兴趣的朋友可以参考学习下。
    2018-05-05
  • vue.js的简单自动求和计算实例

    vue.js的简单自动求和计算实例

    今天小编就为大家分享一篇vue.js的简单自动求和计算实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • el-table树形数据量过大,导致页面卡顿问题及解决

    el-table树形数据量过大,导致页面卡顿问题及解决

    这篇文章主要介绍了el-table树形数据量过大,导致页面卡顿问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • 详解让sublime text3支持Vue语法高亮显示的示例

    详解让sublime text3支持Vue语法高亮显示的示例

    本篇文章主要介绍了让sublime text3支持Vue语法高亮显示的示例,非常具有实用价值,需要的朋友可以参考下
    2017-09-09
  • Vue父子组件之间的通信实例详解

    Vue父子组件之间的通信实例详解

    在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同。这篇文章主要介绍了Vue---父子组件之间的通信,需要的朋友可以参考下
    2018-09-09
  • 关于vue自适应布局(各种浏览器,分辨率)的示例代码

    关于vue自适应布局(各种浏览器,分辨率)的示例代码

    这篇文章主要介绍了vue自适应布局(各种浏览器,分辨率),主要使用了flex布局的flex:1属性和自适应的css+vh+百分比这种方式,开局设置overflow:hidden,主体main部分要设置:overflow:auto,需要的朋友可以参考下
    2022-09-09
  • vue封装第三方插件并发布到npm的方法

    vue封装第三方插件并发布到npm的方法

    本篇文章主要介绍了vue封装第三方插件并发布到npm的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue之关于Eslint自动加分号的问题及解决

    Vue之关于Eslint自动加分号的问题及解决

    这篇文章主要介绍了Vue之关于Eslint自动加分号的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue安装和使用scss及sass与scss的区别详解

    vue安装和使用scss及sass与scss的区别详解

    这篇文章主要介绍了vue安装和使用教程,用了很久css预编译器,但是一直不太清楚到底用的sass还是scss,直到有天被问住了有点尴尬,感兴趣的朋友一起看看吧
    2018-10-10

最新评论