【vue】更改角色权限后,实现页面不刷新更改其可展示的导航菜单

登入的角色本身属于领导级别(集团权限),没有下级的不同权限:
在这里插入图片描述
切换不同身份(公司),以获得相应部门的不同导航菜单及权限
在这里插入图片描述
这里实现:更改角色权限后,实现页面 不刷新 更改其展示出来的 导航菜单

1、在右上角页面代码内,通过后端接口获取子角色(公司)的对应菜单路由(图2中data)
2、将路由数据和自身代码写入方式一样,写入store存储路由数据(参考自己代码首次获取路由后存储数据的方法)
3、通过事件总线$eventBus监听页面路由替换导航
4、清空、重新添加路由$router.addRoutes

在这里插入图片描述
导航组件里监听并操作:
在这里插入图片描述
代码片:

async toMenuChange(id) {//...省略前面非必要 此处调用自己的接口await getMenuListChange().then((mresult) => {// console.log('得到新路由列表:' , mresult);// 对数据进行改造:const sdata = JSON.parse(JSON.stringify(mresult.data)); const rdata = JSON.parse(JSON.stringify(mresult.data));const sidebarRoutes = this.filterAsyncRouter(sdata);const rewriteRoutes = this.filterAsyncRouter(rdata, false, true);rewriteRoutes.push({ path: "*", redirect: "/404", hidden: true });store.commit("SET_ROUTES", rewriteRoutes);store.commit("SET_SIDEBAR_ROUTERS",constantRoutes.concat(sidebarRoutes));store.commit("SET_DEFAULT_ROUTES", sidebarRoutes);store.commit("SET_TOPBAR_ROUTES", sidebarRoutes);// 在事件总线中发布事件 this.$bus.$emit('xxx','传递参数')this.$eventBus.$emit("changeTopBar");// 重置导航resetRouter();this.$router.addRoutes(sidebarRoutes);});
}
this.$eventBus.$on("changeTopBar", () => {// ...
});this.$eventBus.$off(["changeTopBar"]);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/47549.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

攻防世界-supersqli

原题 解题思路 直接查找看不到明显的回显变化 先找回显变化数量 -1 order by 2 #如果是3列就报错,说明只有两列。接下来找数据库名称: -1 union select 1,databases # 结果是后端做了一些简单的过滤,需要更换查找语句。 -1; show …

LeetCode669. 修剪二叉搜索树

669. 修剪二叉搜索树 文章目录 [669. 修剪二叉搜索树](https://leetcode.cn/problems/trim-a-binary-search-tree/)一、题目二、题解方法一:递归法方法二:迭代法 一、题目 给你二叉搜索树的根节点 root ,同时给定最小边界low 和最大边界 hig…

ReenTrantLock可重入锁(和synchronized的区别)总结

可重入性: 从名字上理解,ReenTrantLock的字面意思就是再进入的锁,其实synchronized关键字所使用的锁也是可重入的,两者关于这个的区别不大。两者都是同一个线程没进入一次,锁的计数器都自增1,所以要等到锁…

七夕节日表白:七大网页风格与其适用人群

🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 &a…

如何使用 ChatGPT 将文本转换为 PowerPoint 演示文稿

推荐:使用 NSDT场景编辑器 助你快速搭建可二次编辑的3D应用场景 步骤 1:将文本转换为幻灯片演示文稿 第一步涉及指示 ChatGPT 根据给定的文本生成具有特定数量幻灯片的演示文稿。首先,您必须向 ChatGPT 提供要转换的文本。 使用以下提示指示…

SpringMVC-2-Spring MVC拦截器详解:从入门到精通

SpringMVC-2-Spring MVC拦截器详解:从入门到精通 今日目标 能够编写拦截器并配置拦截器 1.拦截器【理解】 1 拦截器介绍 1.1 拦截器概念和作用 拦截器(Interceptor)是一种动态拦截方法调用的机制,在SpringMVC中动态拦截控制器方…

C的进阶C++学习方向

(꒪ꇴ꒪ ),Hello我是祐言QAQ我的博客主页:C/C语言,Linux基础,ARM开发板,软件配置等领域博主🌍快上🚘,一起学习,让我们成为一个强大的攻城狮!送给自己和读者的…

L1-028 判断素数 测试点全过

题目 本题的目标很简单,就是判断一个给定的正整数是否素数。 输入格式 输入在第一行给出一个正整数N ( ≤ 10 ) (≤ 10) (≤10),随后N行,每行给出一个小于 2 3 1 2^ 31…

Python开发环境(Visual Studio Code、Anaconda、PyInstaller、Enigma Virtual Box)

Python开发环境 [Anaconda、PyInstaller、Enigma Virtual Box] AnacondaAnaconda安装搭建Python环境Anaconda命令 Visual Studio CodeVisual Studio Code中Python设置Visual Studio Code中安装PyQt5Visual Studio Code中使用Qt DesignerVisual Studio Code中Anaconda切换虚拟环…

uniapp 自定义手机顶部状态栏(适配状态栏高度)

开启页面自定义导航栏功能 uniapp 在 pages.json 页面设置了全局的 globalStyle 的 "navigationStyle": "custom" 或单页面的 style 的 "navigationStyle": "custom" 之后页面顶部就没有自带的导航栏了,这时用户可自定义该…

介绍一些编程语言— Perl 语言

介绍一些编程语言— Perl 语言 Perl 语言 简介 Perl 是一种动态解释型的脚本语言。 最初的设计者为拉里・沃尔,它于 1987 1987 1987 年 12 12 12 月 18 18 18 日发表。Perl 借取了 C、sed、awk、shell scripting 以及很多其他编程语言的特性。其中最重要的特性…

仓库管理的重点在哪?仓库管理能有哪些软件?

对于做实体生意的中小商户来说,仓库管理工作是重中之重的,仓库管理的好坏,直接影响着门店销售和财务状况。 但对于很多中小商户来说,没有足够的人力和精力去高效地做好仓库管理工作,而借助仓库管理软件或进销存软件来…

SNAT和DNAT

SNAT和DNAT 一、SNAT策略及应用1.1SNAT策略概述1.2开启SNAT的命令1.2.1 临时打开1.2.2永久打开 1.3SNAT转换1:固定的公网IP地址1.4SNAT转换2:非固定的公网IP地址(共享动态IP地址)1.5SNAT案例1.5.1实验准备1.5.2配置网关服务器&…

Redis之zset(sorted set)类型解读

目录 基本介绍 常用命令 ZADD key score1 member1 [score2 member2] ZRANGE key start stop [WITHSCORES] ZCARD key ZCOUNT key min max ZREM key member [member ...] ZSCORE key member 基本介绍 Redis有序集合zset与普通集合set非常相似,是一个没有重复元素的字…

IDEA启动报错【java.sql.SQLSyntaxErrorException: ORA-00904: “P“.“PRJ_NO“: 标识符无效】

IDEA报错如下: 2023-08-17 11:26:15.535 ERROR [egrant-biz,b48324d82fe23753,b48324d82fe23753,true] 24108 --- [ XNIO-1 task-1] c.i.c.l.c.RestExceptionController : 服务器异常org.springframework.jdbc.BadSqlGrammarException: ### Error queryin…

PDF怎么转成PPT文件免费?一个软件解决

随着科技的不断发展和进步,电子文档已经成为我们日常工作和学习中不可或缺的一部分。PDF作为一种跨平台的文件格式,以其可靠性和易读性而备受推崇。然而,在某些情况下,我们可能需要PDF怎么转成PPT文件免费,以便更好地展…

Day 56

Day 56 583. 两个字符串的删除操作 dp[i][j]:以i-1为结尾的字符串word1,和以j-1位结尾的字符串word2,想要达到相等,所需要删除元素的最少次数。 当word1[i - 1] 与 word2[j - 1]相同的时候,dp[i][j] dp[i - 1][j - 1];当word1…

apache配置安全证书https踩坑记录

apache配置安全证书有如下几步 一、申请证书 这个网上有很多免费的,我用的是阿里云的服务器,在阿里云后台就可以申请免费证书。 二、上传证书 申请好证书后,根据服务器用的什么软件,是apache还是ngnix,下载相应的证书…

六大需求管理工具:满足您的需求管理需求

在项目开发和产品设计中,需求管理是确保项目成功的关键所在。通过使用专业的需求管理工具,团队可以更好地追踪、记录和分析需求,提高工作效率并确保项目按时完成。 市场上有许多需求管理工具可供选择,当下有什么好用的需求管理工…

FlashAttention算法详解

这篇文章的目的是详细的解释Flash Attention,为什么要解释FlashAttention呢?因为FlashAttention 是一种重新排序注意力计算的算法,它无需任何近似即可加速注意力计算并减少内存占用。所以作为目前LLM的模型加速它是一个非常好的解决方案&…