【vue_2】创建一个弹出权限不足的提示框

定义了一个名为 getUserRole 的 JavaScript 函数,该函数接受一个参数 authorityId,根据这个参数的不同值返回相应的用户角色字符串。这段代码的目的是根据传入的 authorityId 值判断用户的角色,然后返回相应的角色名称。

  • 如果 authorityId 的值等于 888,函数返回字符串 ‘超级管理员’。
  • 如果 authorityId 的值等于2,函数返回字符串 ‘游客’。
  • 如果 authorityId 的值等于 1000,函数返回字符串 ‘abc’。
  • 如果 authorityId 的值等于 1200,函数返回字符串 ‘测试人员’。
  • 如果 authorityId 的值等于 2000,函数返回字符串 ‘开发人员’。
  • 如果 authorityId 的值等于 3001,函数返回字符串 ‘def’。
  • 如果 authorityId 的值不属于上述任何一个特定的值,函数返回字符串 ‘其他角色’。
function getUserRole(authorityId) {if (authorityId === 888) {return '超级管理员';} else if (authorityId === 2) {return '游客';} else if (authorityId === 1000) {return 'abc';} else if (authorityId === 1200) {return '测试人员';} else if (authorityId === 2000) {return '开发人员';} else if (authorityId === 3001) {return 'def';} else {return '其他角色';}
}

定义了一个名为 authority_message 的 JavaScript 箭头函数。该函数使用 Element UI 框架中的 ElMessage 组件显示一个警告消息,提示用户当前用户的权限不够。

const authority_message = () => {ElMessage({type: 'warning',message: '当前用户的权限不够'});
};

上面这个 ElMessage是已经封装好的,是git-vue-admin框架自带的东西。

<div style="display: block;"><el-link v-if="![888,1000,1200,2000,3000,3001].includes(userStore.userInfo.authorityId)" class="link" type="primary" @click="authority_message"><h1>账号管理</h1></el-link><el-link v-else class="link" type="primary" @click="toTarget('person')"><h1>账号管理</h1></el-link>
</div>

上面这个userStore.userInfo.authorityId能够拿到对应当前权限人员的号码,如果是超级管理员,拿到的就是888。

console.log('111aqd',userStore.userInfo.authorityId);

可以通过上面这个看是否在控制台打印出有对应的号码。

v-if的逻辑是,如果拿到的数字不是在[888,1000,1200,2000,3000,3001]当中的话,就提示说该用户没有权限。
v-else的逻辑是,如果不满足v-if的条件,就跳转界面。

出现的问题:为什么底下的这些框框看起来高矮不一?并且当切换为超级管理员与测试人员的时候,底下的框框长度也不一样?

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

【源码】智慧工地系统:让工地管理可视化、数字化、智能化

智慧工地是指运用信息化手段&#xff0c;围绕施工过程管理&#xff0c;建立互联协同、智能生产、科学管理的施工项目信息化生态圈&#xff0c;并将此数据在虚拟现实环境下与物联网采集到的工程信息进行数据挖掘分析&#xff0c;提供过程趋势预测及专家预案&#xff0c;实现工程…

npm install报错常用解题思路

最近刚接手一个“新”项目&#xff0c;让我很无语。明明是去年起的项目&#xff0c;但是它所用的技术栈都很旧&#xff0c;我启动项目&#xff0c;控制台一堆warning报错&#xff0c;然后项目结构也很让我不适应&#xff0c;很多地方都可以用文件夹包一下来方便定位。哎&#x…

切换服务器上自己用户目录下的 conda 环境和一个外部的 Conda 环境

如果我们有自己的 Miniconda 安装和一个外部的 Conda 环境&#xff08;比如一个全局安装的 Anaconda&#xff09;&#xff0c;我们可以通过修改 shell 环境来切换使用它们。这通常涉及到更改 PATH 环境变量&#xff0c;以便指向你想要使用的 Conda 安装的可执行文件&#xff1a…

分布式链路追踪实战篇-日志库集成opentelemetry的思路

由上文分布式链路追踪入门篇-基础原理与快速应用可以知道分布式链路追踪的作用&#xff0c;但是距离应用到项目中&#xff0c;我们还需要对项目中一些关键组件进行opentelemetry的集成&#xff0c;例如日志库&#xff0c;ORM、http框架、rpc框架等。 一、日志库如何集成opentel…

【最新版】SolidWorks 2023 SP5.0 完整版安装包+安装教程

分享模式&#xff1a;免费/绿色&#xff0c;按教程安装 下载地址&#xff1a; https://pan.xunlei.com/s/VNL0-DD_ogcRFwy-xi0HUtlyA1?pwdfzqw# 提取码&#xff1a;fzqw SOLIDWORKS 2023新版本对电脑配置要求 更多详细说明请去官网查看。 安装使用方法&#xff1a; 一、卸…

Windows下安装MySQL

几年前学习mycat中间件的时候在window机器上安装过MySql&#xff0c;但是由于电脑配置不高&#xff0c;同时打开Mysql服务&#xff0c;idea、SQlyog等软件非常卡&#xff0c;再加上SQLyog和MySQL版本不兼容导致登录不上&#xff0c;于是把它卸载了。最近做练习需要&#xff0c;…

IBM X3650M4安装ESXI6.5卡在/lsl_mr3.v00

环境&#xff1a;IBM X3650M4服务器双盘配置raid1&#xff0c;通过rufus制作启动U盘&#xff0c;安装VMware Vsphere 5.5系统 问题&#xff1a;卡在/lsi_mr3.v00界面无法往下运行&#xff08;两台配置一样的机器遇到同样的问题&#xff09; 解决方案&#xff1a; 直接在U盘根…

React 中 useContext 的用法与性能问题详解

文章目录 一、useContext 是什么&#xff1f;二、useContext 使用场景三、使用步骤1.使用 createContext 创建一个 Context2.使用 Provider 提供值3.使用 useContext 访问 Context完整示例 四、Provider 的 value 类型五、如何在子组件中修改 context 的数据&#xff1f;六、使…

面试:Docker相关问题

文章目录 请解释一下什么是 Docker&#xff0c;以及它在云环境中的应用请简述Docker和LXC的区别什么是Docker Compose&#xff1f;请简述其作用和使用场景在使用Docker时&#xff0c;如何为容器创建一个可访问的网络当一个Docker容器运行异常时&#xff0c;如何通过Docker命令查…

音视频项目—基于FFmpeg和SDL的音视频播放器解析(十八)

介绍 在本系列&#xff0c;我打算花大篇幅讲解我的 gitee 项目音视频播放器&#xff0c;在这个项目&#xff0c;您可以学到音视频解封装&#xff0c;解码&#xff0c;SDL渲染相关的知识。您对源代码感兴趣的话&#xff0c;请查看基于FFmpeg和SDL的音视频播放器 如果您不理解本…

springsecurity6配置一

springsecurity6默认的过滤器是UsernamePasswordAuthenticationToken。具体操作步骤如下: 一、定义一个实体实现springsecurity的UserDetails接口 package com.school.information.core.security.entity;import com.alibaba.fastjson.annotation.JSONField; import com.scho…

GitHub Copilot 替代品?

应该没人不知道代码补全这个东西了吧&#xff0c;第一次使用 GitHub Copilot 之后&#xff0c;只觉得真香&#xff0c;现在居然还有一点离不了了。后面因为收费原因&#xff0c;就没再用了&#xff0c;找了一个 tabnine 替代&#xff0c;用了几天&#xff0c;体验是真的比不上 …

Python中如何选择Web开发框架?

Python开发中Web框架可谓是百花齐放&#xff0c;各式各样的web框架层出不穷&#xff0c;那么对于需要进行Python开发的我们来说&#xff0c;如何选择web框架也就变成了一门学问了。本篇文章主要是介绍目前一些比较有特点受欢迎的Web框架&#xff0c;我们可以根据各个Web框架的特…

计算机组成原理-固态硬盘SSD

文章目录 总览机械硬盘vs固态硬盘固态硬盘的结构固态硬盘与机械硬盘相比的特点磨损均衡技术例题 总览 机械硬盘vs固态硬盘 固态硬盘采用闪存技术&#xff0c;是电可擦除ROM 下图右边黑色的块块就是一块一块的闪存芯片 固态硬盘的结构 块大小16KB~512KB 页大小512B~4KB 对固…

【Java】智慧工地云平台源码(APP+SaaS模式)

在谈论“智慧工地”之前&#xff0c;我们首先得知道传统工地为什么跟不上时代了。 说起传统工地&#xff0c;总有一些很突出的问题&#xff1a;比如工友多且杂&#xff0c;他们是否入场、身体状况如何&#xff0c;管理人员只能依靠巡查、手工纪录来判断&#xff0c;耗时耗力&am…

FANUC机器人系统配置相关--系统变量介绍

FANUC机器人系统配置相关–系统变量介绍 系统配置页相关变量 1- 停电处理$SEMIPOWERFL = TRUE(有效)/FALSE(无效) 2- 停电处理中的I/O $PWF_IO = 1(不恢复)/2(仿真恢复)/3(解除仿真)/4(恢复所有) 3- 停电处理无效时自动执行的程序 $PWR_NORMAL = ‘’ 4- 停电处理有效时自动…

【vue_1】console.log没有反应

1、打印不出来&#xff1f;2、警告也会出现问题3、插播&#xff1a;如何使用if-else 语句来处理逻辑 1、打印不出来&#xff1f; 要做一个权限不够的弹出消息框 const authority_message () > {ElMessage({type: warrnings,message: 当前用户的权限不够});console.log(he…

微服务qiankun通信方式

qiankun&#xff1a; 是一种类似于微服务的架构&#xff0c;是将一个大型应用拆分成若干个更小、更简单&#xff0c;可以独立开发、测试和部署的子应用&#xff0c;然后由一个基座应用根据路由进行应用切换&#xff0c;主要是为了解决大型工程在变更、维护、扩展等方面的困难而…

详解C语言中的指针数组和数组指针

指针数组和数组指针是 C 语言中比较常见的两种类型。它们虽然名字很相似&#xff0c;但是含义、用法以及指向类型都不同&#xff0c;需要分开理解。 指针数组 指针数组是一个数组&#xff0c;其中每个元素都是一个指针。这些指针可以指向不同类型的数据&#xff0c;也可以指向…

1457.二叉树中的伪回文路径

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;1457. 二叉树中的伪回文路径 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 深度优先遍历的同时对该路径上的 1~9 计数&#xff0c;当某条路径遍历完成后&#xff0c;若总的数据个数为偶数…