【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.mfbz.cn/a/84129.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

安卓主板定制_电磁屏/电容屏安卓平板基于MTK联发科方案定制

定制化行业平板 在各行各业中的地位越来越重要,甚至在行业转型和发展中发挥着不可替代的作用。随着工业化社会的快速发展,工业生产对智控设备要求越来越高,运用的范畴也越来越普遍广泛,工业级平板就是其中一种应用广泛的设备。 新…

jenkins 日志输出显示时间戳的方式

网上很多方式比较片面,最新版插件直接使用即可无需更多操作。 使用方式如下: 1.安装插件 Timestamper 2.更新全局设置 系统设置-找到 Timestamper 勾选 Enabled for all Pipeline builds 也可修改时间戳格式。 帮助信息中显示 When checked, timesta…

R package org.Hs.eg.db to convert gene id

文章目录 install使用org.Hs.egENSEMBL将Ensembl id convert to gene idorg.Hs.egGENENAME 将Ensembl id convert to gene nameorg.Hs.egSYMBOL 将 gene symbol convert to gene id我现在有一些ensembl id 如何转为 gene name注意你会遇到一些record不全的情况,gtf文…

基于Element-ui的颜色选取器,增加最近使用的颜色。

8个预设颜色值&#xff0c;使用一个颜色后&#xff0c;将颜色放到第一个预设颜色&#xff0c;去重&#xff0c;保存到本地。 完整代码自取 <template><div><el-color-picker :value"value" show-alpha :predefine"predefineColors" chan…

有没有免费格式转换工具推荐?PDF转化为PPT的方法

在当今职场生活中&#xff0c;掌握文件格式转换技能变得异常重要。将PDF文档转换为PPT格式可以在演讲、报告等场合更好地展示和传达信息&#xff0c;为我们的专业形象增添亮点&#xff0c;接下来我们可以一起来看一下“有没有免费格式转换工具推荐?PDF转化为PPT的方法”相关的…

Lua与C++交互(一)————堆栈

Lua与C交互&#xff08;一&#xff09;————堆栈 Lua虚拟机 什么是Lua虚拟机 Lua本身是用C语言实现的&#xff0c;它是跨平台语言&#xff0c;得益于它本身的Lua虚拟机。 虚拟机相对于物理机&#xff0c;借助于操作系统对物理机器&#xff08;CPU等硬件&#xff09;的一…

微信小程序canvas type=2d生成海报保存到相册、文字换行溢出显示...、文字删除线、分享面板

做个简单的生成二维码海报分享&#xff0c;我做的时候也找简单的方法看能不能实现页面直接截图那种生成图片&#xff0c;原生小程序不支持&#xff0c;不多介绍下面有全部代码有注释、参数自行替换运行看看&#xff0c;有问题可以咨询我&#xff0c;我写的已经上线 效果如图&a…

Excel带数值的计算公式

问题描述 如图&#xff0c;想实现在第三列单元格中实现带数值的计算表达式 解决方法 单元格 & "/" & 单元格 & "" & TEXT(单元格/单元格, "0.00%")& 为简单的 与 符号 最后设定单元格数值与格式&#xff08;保留两位小数…

【Rust】Rust学习 第十七章Rust 的面向对象特性

面向对象编程&#xff08;Object-Oriented Programming&#xff0c;OOP&#xff09;是一种模式化编程方式。对象&#xff08;Object&#xff09;来源于 20 世纪 60 年代的 Simula 编程语言。这些对象影响了 Alan Kay 的编程架构中对象之间的消息传递。他在 1967 年创造了 面向对…

[MySQL]主从服务器布置

配置主服务器 配置文件 /etc/my.cnf 在[mysqld]下进行配置 log_binON //启动二进制日志 log-bin mysql-bin //启用二进制日志&#xff0c;用于记录主服务器的更新操作 server-id 1 // 用来表示mysql服务id,保证集成环境中的唯一性 , 范围 [1,2^32) read-only0 // 1表示只…

Android Studio 接入OpenCV最简单的例子 : 实现灰度图效果

1. 前言 上文 我们在Windows电脑上实现了人脸功能&#xff0c;接下来我们要把人脸识别的功能移植到Android上。 那么首先第一步&#xff0c;就是要创建一个Native的Android项目&#xff0c;并且配置好OpenGL&#xff0c;并能够调用成功。 这里我们使用的是openCV-4.8.0&#x…

SOLIDWORKS有限元分析

SOLIDWORKS是一款广泛使用的三维计算机辅助设计软件&#xff0c;同时它还具有强大的有限元分析功能。有限元分析是一种工程分析方法&#xff0c;它将复杂的实体分解成许多小的有限元素&#xff0c;以便对其进行数学建模和分析。SOLIDWORKS的有限元分析功能可以帮助工程师预测和…

在Flutter应用内部实现分屏功能

前言 这一次被要求实现屏幕上同时展示两个页面&#xff0c;并且两个页面的逻辑&#xff0c;功能互不影响&#xff0c;通俗一点讲就是在Flutter内部实现一个类似于分屏的功能&#xff0c;这可难不倒我。 方法 要在 Flutter 中实现一个屏幕的上半部分和下半部分展示不同的页面…

金融市场中的机器学习;快手推出自研语言模型“快意”

&#x1f989; AI新闻 &#x1f680; OpenAI可能面临《纽约时报》的起诉&#xff0c;侵犯知识产权引发争议 摘要&#xff1a;OpenAI使用《纽约时报》的文章和图片来训练AI模型&#xff0c;违反了《纽约时报》的服务条款&#xff0c;可能面临巨大损失。此前&#xff0c;也有其…

无涯教程-PHP - XML

简单的XML解析器解析 Name&#xff0c; attributes 和 textual content&#xff0c;简单的XML函数如下所示- simplexml_load_file() 此函数接受文件路径作为第一个参数&#xff0c;这是必需的。 simplexml_load_file(($fileName,$class,$options,$ns,$is_prefix) simplexml…

韩语字母及输入法介绍

韩语字母及输入法介绍 字母由来 朝鲜语字母的由来为如下&#xff1a;十五世纪的朝鲜王国世宗大王 和他的集贤殿大臣在思考&#xff0c;创制自己本国的文字&#xff0c;仿照了“天地人思想”和“发音器官的形象”而创制了朝鲜语字母。 ​ 元音是由三个要素而组成的&#xff1…

Confluent kafka 异常退出rd_tmpabuf_alloc0: rd kafka topic info_new_with_rack

rd_tmpabuf_alloc0: rd kafka topic info_new_with_rack 根据网上的例子&#xff0c;做了一个测试程序。 C# 操作Kafka_c# kafka_Riven Chen的博客-CSDN博客 但是执行下面一行时&#xff0c;弹出上面的异常&#xff0c;闪退。 consumer.Subscribe(queueName) 解决方案&…

TensorRT推理手写数字分类(三)

系列文章目录 &#xff08;一&#xff09;使用pytorch搭建模型并训练 &#xff08;二&#xff09;将pth格式转为onnx格式 &#xff08;三&#xff09;onxx格式转为engine序列化文件并进行推理 文章目录 系列文章目录前言一、TensorRT是什么&#xff1f;二、如何通过onnx生成en…

Java并发编程之线程池详解

目录 &#x1f433;今日良言:不悲伤 不彷徨 有风听风 有雨看雨 &#x1f407;一、简介 &#x1f407;二、相关代码 &#x1f43c;1.线程池代码 &#x1f43c;2.自定义实现线程池 &#x1f407;三、ThreadPoolExecutor类 &#x1f433;今日良言:不悲伤 不彷徨 有风听风 有…

C++图形界面编程-MFC

C控制台程序是命令行黑框&#xff0c;如果要写一个图形界面&#xff0c;VS也提供了图形界面编程MFC。建项目的时候选如下选项&#xff1a; 类似于QT。 问&#xff1a;那么MFC项目的运行入口main()或WinMain()在哪里呢&#xff1f; 答&#xff1a;其实&#xff0c;在MFC应用程…