当前位置: 首页 > news >正文

vue3的路由配置

  1. 先找到Layout布局文件,从中找到左侧边栏,找到下述代码
<SidebarItem v-for="route in noHiddenRoutes" :key="route.path" :item="route" :base-path="route.path" />/**
*菜单项 <SidebarItem>:
*使用v-for循环遍历noHiddenRoutes数组,为每个路由生成一个<SidebarItem>组件。
*:key="route.path":为每个<SidebarItem>提供唯一的键值,这是Vue中优化DOM更新的一种方式。
*:item="route" 和 :base-path="route.path":将当前路由对象和路径作为属性传递给<SidebarItem>。
*/
  1. 查看noHiddenRoutes数组
const noHiddenRoutes = computed(() => permissionStore.routes.filter((item) => !item.meta?.hidden))
//从 permissionStore 中获取路由列表,过滤掉 meta.hidden 为 true 的路由,保留未隐藏的路由。
  1. 查看permissionStore,找到下述与展示路由有关代码
/** 根据角色生成可访问的 Routes(可访问的路由 = 常驻路由 + 有访问权限的动态路由) */const setRoutes = (roles: string[]) => {const accessedRoutes = filterDynamicRoutes(dynamicRoutes, roles)_set(accessedRoutes)}
  1. 查看 filterDynamicRoutes 函数
const filterDynamicRoutes = (routes: RouteRecordRaw[], roles: string[]) => {//过滤动态数组console.log(12345)//被打印,说明这个函数被调用const res: RouteRecordRaw[] = []console.log(routes,'4444')routes.forEach((route) => {const tempRoute = { ...route }console.log(333333)//没有被打印,说明两者之间的内容不被执行if (hasPermission(roles, tempRoute)) {if (tempRoute.children) {tempRoute.children = filterDynamicRoutes(tempRoute.children, roles)}res.push(tempRoute)}})return res
}

在12345和333333之间的函数 routes.forEach((route) 作用是遍历 routes 数组,此时我们打印 routes 的值,发现打印结果是个空数组[],说明这个数组没有被传递进来。

  1. 这个函数是filterDynamicRoutes 的定义,那么我们找到使用这个函数的地方,看入参是什么
  /** 根据角色生成可访问的 Routes(可访问的路由 = 常驻路由 + 有访问权限的动态路由) */const setRoutes = (roles: string[]) => {console.log('2222222')const accessedRoutes = filterDynamicRoutes(dynamicRoutes, roles)_set(accessedRoutes)}

我们发现入参 routes 是 dynamicRoutes 动态路由,跳转到 dynamicRoutes 函数,这个函数内 容为空,我们将需要权限才能展示的路由放在动态路由函数内,此时页面不再是空数组
在这里插入图片描述

  1. 然后继续执行if条件句
const hasPermission = (roles: string[], route: RouteRecordRaw) => {//用于检查用户是否有权限访问某个路由const routeRoles = route.meta?.roles//从路由对象的 meta 属性中提取 roles 字段return routeRoles ? roles.some((role) => routeRoles.includes(role)) : true//根据 routeRoles 和 roles 判断用户是否有权限访问该路由
}

最后前端路由按要求role为admin可显示,为editor不可显示

相关文章:

vue3的路由配置

先找到Layout布局文件&#xff0c;从中找到左侧边栏&#xff0c;找到下述代码 <SidebarItem v-for"route in noHiddenRoutes" :key"route.path" :item"route" :base-path"route.path" />/** *菜单项 <SidebarItem>: *使用…...

在彼此的根系里呼吸

爱如草木&#xff0c;需以晨露滋养&#xff0c;而非绳索捆缚。一段健康的亲密关系&#xff0c;恰似两株根系相连却各自向阳的树——风起时枝叶相触&#xff0c;晴空下共享光影&#xff0c;却始终保有向地心深处生长的自由。那些纠缠的根须是信任编织的网&#xff0c;容得下沉默…...

深入理解若依RuoYi-Vue数据字典设计与实现

深入理解若依数据字典设计与实现 一、Vue2版本主要文件目录 组件目录src/components&#xff1a;数据字典组件、字典标签组件 工具目录src/utils&#xff1a;字典工具类 store目录src/store&#xff1a;字典数据 main.js&#xff1a;字典数据初始化 页面使用字典例子&#xf…...

深入MapReduce——从MRv1到Yarn

引入 我们前面篇章有提到&#xff0c;和MapReduce的论文不太一样。在Hadoop1.0实现里&#xff0c;每一个MapReduce的任务并没有一个独立的master进程&#xff0c;而是直接让调度系统承担了所有的worker 的master 的角色&#xff0c;这就是Hadoop1.0里的 JobTracker。在Hadoop1…...

Flutter_学习记录_Tab的简单Demo~真的很简单

1. Tab的简单使用了解 要实现tab(选项卡或者标签视图)需要用到三个组件&#xff1a; TabBarTabBarViewTabController 这一块&#xff0c;我也不知道怎么整理了&#xff0c;直接提供代码吧&#xff1a; import package:flutter/material.dart;void main() {runApp(MyApp());…...

CSS核心

CSS的引入方式 内部样式表是在 html 页面内部写一个 style 标签&#xff0c;在标签内部编写 CSS 代码控制整个 HTML 页面的样式。<style> 标签理论上可以放在 HTML 文档的任何地方&#xff0c;但一般会放在文档的 <head> 标签中。 <style> div { color: r…...

Deepseek本地部署(ollama+open-webui)

ollama 首先是安装ollama&#xff0c;这个非常简单 https://ollama.com/ 下载安装即可 open-webui 这个是为了提供一个ui&#xff0c;毕竟我们也不想在cmd和模型交互&#xff0c;很不方便。 第一&#xff0c;需要安装python3.11&#xff0c;必须是3.11&#xff08;其他版…...

PaddleSeg 从配置文件和模型 URL 自动化运行预测任务

git clone https://github.com/PaddlePaddle/PaddleSeg.git# 在ipynb里面运行 cd PaddleSegimport sys sys.path.append(/home/aistudio/work/PaddleSeg)import os# 配置文件夹路径 folder_path "/home/aistudio/work/PaddleSeg/configs"# 遍历文件夹&#xff0c;寻…...

数据结构 队列

目录 前言 一&#xff0c;队列的基本知识 二&#xff0c;用数组实现队列 三&#xff0c;用链表实现队列 总结 前言 接下来我们将学习队列的知识&#xff0c;这会让我们了解队列的基本概念和基本的功能 一&#xff0c;队列的基本知识 (Queue) 我们先来研究队列的ADT&#xff0c…...

Cocoa和Cocoa Touch是什么语言写成的?什么是Cocoa?编程语言中什么是框架?为什么苹果公司Cocoa类库有不少NS前缀?Swift编程语言?

Cocoa和Cocoa Touch是什么语言写成的? 二者主要都是用Objective-C语言编写而成的。 什么是Cocoa? Cocoa是苹果操作系统macOS和iOS上的应用程序开发框架集合&#xff0c;核心语言是Objective-C编程语言&#xff0c;在移动平台被称为Cocoa Touch&#xff0c;Cocoa包含多个子框架…...

登录管理——认证方案(JWT、拦截器、ThreadLocal、短信验证)

两种常见的认证方案 基于Session认证 登录状态信息保存在服务器内存中&#xff0c;若访问量增加&#xff0c;单台节点压力会较大集群环境下需要解决集群中的各种服务器登录状态共享问题 解决方案&#xff1a;将登录状态保存的Redis中&#xff0c;从Redis中查找登录状态 基于…...

Java实现LFU缓存策略实战

LFU算法原理在Java中示例实现集成Caffeine的W-TinyLFU策略缓存实战总结LFU与LRU稍有不同,LFU是根据数据被访问的频率来决定去留。尽管它考虑了数据的近期使用,但它不会区分数据的首次访问和后续访问,淘汰那些访问次数最少的数据。 这种缓存策略主要用来处理以下场景: 数据…...

物业系统改革引领行业智能化管理与提升服务质量的新征程

内容概要 在当今迅速变化的社会中&#xff0c;物业系统改革正在悄然推动行业的智能化管理进程。物业管理作为一个古老而传统的领域&#xff0c;面临着诸多挑战&#xff0c;包括效率低下、业主需求难以满足等。数字化转型为这一现象注入了新活力&#xff0c;帮助物业公司通过先…...

QT+mysql+python 效果:

# This Python file uses the following encoding: utf-8 import sysfrom PySide6.QtWidgets import QApplication, QWidget,QMessageBox from PySide6.QtGui import QStandardItemModel, QStandardItem # 导入需要的类# Important: # 你需要通过以下指令把 form.ui转为ui…...

动手学图神经网络(4):利用图神经网络进行图分类

利用图神经网络进行图分类:从理论到实践 引言 在之前的学习中,大家了解了如何使用图神经网络(GNNs)进行节点分类。本次教程将深入探讨如何运用 GNNs 解决图分类问题。图分类是指在给定一个图数据集的情况下,根据图的一些结构属性对整个图进行分类,而不是对图中的节点进…...

【Block总结】PConv,部分卷积|即插即用

论文信息 标题: Run, Don’t Walk: Chasing Higher FLOPS for Faster Neural Networks 论文链接: https://arxiv.org/pdf/2303.03667 GitHub链接: https://github.com/JierunChen/FasterNet 创新点 该论文的核心创新在于提出了一种新的运算符——部分卷积&#xff08;PCo…...

接口使用实例(1)

大家好&#xff0c;今天我们来看看接口的一些实例&#xff0c;关于如何定义和实现接口&#xff0c;相信通过这些例子&#xff0c;我们能有一些清晰的认知。 先定义一个学生类&#xff1a; 再给定一个学生数组&#xff0c;对这个对象数组中的元素进行排序&#xff08;按分数排&…...

动态规划DP 最长上升子序列模型 总览

最长上升子序列模型 1. 最长上升子序列 1.1 怪盗基德的滑翔伞 1.1.1 登山 1.1.2 合唱队形 1.2 友好城市 1.3 最长上升子序列和 1.4 导弹拦截...

网络工程师 (7)进程管理

一、进程相关的概念 &#xff08;一&#xff09;定义 进程&#xff08;Process&#xff09;是计算机中的程序关于某数据集合上的一次运行活动&#xff0c;是系统进行资源分配和调度的基本单位&#xff0c;也是操作系统结构的基础。进程是程序的一次执行实例&#xff0c;具有动…...

登录授权流程

发起一个网络请求需要&#xff1a;1.请求地址 2.请求方式 3.请求参数 在检查中找到request method&#xff0c;在postman中设置同样的请求方式将登录的url接口复制到postman中&#xff08;json类型数据&#xff09;在payload中选择view parsed&#xff0c;将其填入Body-raw中 …...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...