JeeSite Vue3：前端开发控制实现基于身份角色的权限验证

随着技术的飞速发展，前端开发技术日新月异。在这个背景下，JeeSite Vue3 作为一个基于 Vue3、Vite、Ant-Design-Vue、TypeScript 和 Vue Vben Admin 的前端框架，引起了广泛关注。它凭借其先进的技术栈和丰富的功能模块，为初学者和团队开发者提供了一个快速、高效且强大的开发平台。

JeeSite Vue3框架截图

图片

 

图片

   

图片

 

图片

 

JeeSite Vue3 的技术栈

JeeSite Vue3 的技术栈包括 Vue3、Vite、Ant-Design-Vue、TypeScript 和 Vue Vben Admin。这些技术都是目前前端开发领域的领军者，它们结合在一起，为开发者提供了一个强大且现代化的开发环境。

Vue3 作为一款流行的前端框架，凭借其组件化的开发方式和简洁的 API，大大提高了开发效率。Vite 则是一个现代化的前端构建工具，提供了快速的冷启动和即时热更新，使得开发过程更加流畅。Ant-Design-Vue 是 Ant Design 的 Vue 实现，提供了一套高质量的 UI 组件，使界面设计更加美观和易用。TypeScript 是 JavaScript 的超集，通过静态类型检查和丰富的类型系统，提高了代码质量。最后，Vue Vben Admin 是一个高质量的后台管理系统模板，为中大型项目的开发提供了现成的解决方案。

在 Vben Admin 基础上做的改进：

  • 更精致的界面细节优化改进，非常适合信息化管理后台

  • 主题风格改进，不同的布局风格，菜单及权限体验优化

  • 顶部菜单、分隔菜单、混合菜单的活动状态激活和加载优化改进

  • 树表支持异步的封装，提升展开折叠性能，支持按层次展开折叠树表

  • 树结构新增快捷刷新、动态生成树、层次独立和不独立的数据返回兼容

  • 增加左树右表功能展示，可折叠左树，树组件增加默认图标

  • 表单组件适应各种数据格式来源，特别是多选字符串到数组的互转兼容

  • 表单新增各种便捷属性和表单组件，下拉框和树选择支持标签名回显

  • 表单组件，改进折叠表单 Action 的算法，智能化布局

  • 表格组件，Action 更多，支持横向显示操作，更方便

  • 表格组件，子表编辑改进，表格列排序和重置改进优化

  • 新增字典组件，支持展示到表格列、表单组件下拉框单选框等

  • 字典标签支持 Tag、Badge、自定义 class、style 等，显示风格

  • 更方便的支持 Tab 页面的缓存，切换页签的时候不重载页面内容

  • Tab 页签界面美化、图标显示、任何标签上右键，可快速刷新等等

  • 全局 Axios 改进，兼容各种数据格式，超时消息提醒改进

  • 功能权限鉴权改进，并兼容本地路由和后台路由同时使用

  • 等等各种细节改进，体验优化，黑暗布局细节优化

  • Vue端完全开源，用上你就会爱上，实在太方便了

设计特点

定义众多组件，非常贴心的组件属性及小功能，符合 JeeSite 以往的设计思想，列表和表单以数据驱动视图，极大简化了业务功能开发，注释分解详见本页最下【源码解析】

为什么做数据驱动视图？前端向下兼容一直是最大的问题，有了一套相应的标准，会对框架升级帮助很大。比如你可以非常小的成本，业务代码改动非常小的情况下，去升级前端；数据驱动视图可以为未来自定义拖拽表单做更好的铺垫，数据存储结构更清晰化，更利于维护。

提示：请仔细阅读源码解析，表单视图和列表视图上的注释哦，复杂表单可以多表单联合使用。

安装使用

  • 如果没有安装 Node.js 16，下载地址：https://nodejs.org

# 验证
node -v

  • 如果没有安装 Yarn 执行安装（要求 Yarn v1.x）

npm i -g yarn
# 验证
yarn -v

  • 获取代码

git clone https://gitee.com/thinkgem/jeesite-vue.git
cd jeesite-vue

注意：不要放到中文或带空格的目录下。

  • 安装依赖

yarn config set registry https://registry.npm.taobao.org
yarn install

  • 开发环境运行访问（方式一）

yarn serve

开发环境会加载文件较多，便于调试，请耐心等待。

  • 编译打包后运行访问（方式二）

yarn preview

编译打包后，会整合这些文件，所以访问性能会大大提高，生产环境可以开启 gzip

  • 打包发布程序

yarn build

打包完成后，会在根目录生成 dist 文件夹，发布 nginx。

详见文档：https://jeesite.com/docs/vue-install-deploy/#部署到正式服务器

  • 快速运行

  • 环境准备：JDK 1.8 or 11、17、Maven 3.6+、无需准备数据库（使用内嵌 H2 DB）

  • 下载源码：https://gitee.com/thinkgem/jeesite4/repository/archive/v5.3.zip 并解压

  • 执行脚本：/web-fast/bin/run-tomcat.bat 启动服务即可（自动初始化库）

  • 浏览器访问：http://127.0.0.1:8980/js/ 账号 system 密码 admin

  • 部署常见问题：https://jeesite.com/docs/faq/

  • 分离端安装：https://jeesite.com/docs/vue-install-deploy/

  • 打开 .env.development 文件，修改后台接口：

# 代理设置，可配置多个，不能换行，格式：[访问接口的根路径, 代理地址, 是否保持Host头]
# VITE_PROXY = [["/js","https://vue.jeesite.com/js",true]]
VITE_PROXY = [["/js","http://127.0.0.1:8980/js",false]]

# 访问接口的根路径
VITE_GLOB_API_URL = 

# 访问接口的前缀，在根路径之后
VITE_GLOB_API_URL_PREFIX = /js

演示地址

  1. 地址：http://vue.jeesite.com/

基于身份角色的权限验证实现如下

创建一个 JavaScript 文件实现了一个名为 hasFunPermission 的函数，用于判断用户是否具有特定功能的权限。

         // 导入用户存储（获取用户角色）          import { useUserStore } from '/@/store/modules/user';          // 导入用户权限          import { usePermission } from '/@/hooks/web/usePermission';                              export const hasFunPermission = () => {                              const { hasPermission } = usePermission();          // 是否系统权限            let isSysPermission = hasPermission('sys:role');          // 获取角色列表            const roleList = useUserStore().getRoleList;                        console.log("roleList = " + JSON.stringify(roleList));                      //  是否有该功能权限            let isFunPermission = ref(false);                      // 当为系统权限 或 角色为corpAdmin 或角色为 noc 有该功能权限            if(isSysPermission || roleList.includes('corpAdmin') || roleList.includes('noc')){                             isFunPermission.value = true;            }            return isFunPermission.value;                                  }

首先，代码导入了两个模块：useUserStore 和 usePermission。

  • useUserStore 模块用于获取用户的角色信息。

  • usePermission 模块提供了权限判断的相关功能。

接下来，导出的 hasFunPermission 函数用于判断用户是否具有特定的功能权限。

在函数内部，进行了以下操作：

  • 通过 hasPermission('sys:role') 方法判断用户是否具有系统权限。

  • 通过 useUserStore().getRoleList 获取用户的角色列表。

  • 将角色列表存储在 roleList 变量中，并通过 console.log 打印出来。

  • 创建一个名为 isFunPermission 的引用变量，并将其初始化为 false，表示用户是否具有功能权限。

  • 接下来，通过条件判断来确定用户是否具有该功能的权限。如果用户具有系统权限，或者角色列表中包含 corpAdmin 或 noc，则将 isFunPermission 的值设置为 true。

  • 最后，函数返回 isFunPermission 的值，即用户是否具有该功能的权限。

总结起来，该函数通过判断用户是否具有系统权限或特定角色，来确定用户是否具有某个功能的权限。

结语

在 JeeSite Vue3中，要判断用户是否具有特定功能权限，首先，需要定义用户的角色和权限，角色可以是管理员、普通用户等，而权限可以是用户可以执行的具体操作或访问的资源。其次，创建一个自定义指令，用于根据用户的权限来控制元素或组件的显示与隐藏，可以使用v-if或v-show来动态控制元素的显示。然后，在组件中使用权限控制指令来控制元素的显示与隐藏，根据用户的角色和权限，在组件中使用权限控制指令。最后，编写一个函数来检查用户是否具有特定功能的权限。

  1. jeesite-vue项目下载地址

     https://gitee.com/thinkgem/jeesite-vue

  2. jeesite-vue项目文档地址

    https://jeesite.com/docs/vue-auth/#%E6%9D%83%E9%99%90%E6%8E%A7%E5%88%B6

  3. csdn上vue3权限验证博客地址（可参考学习）

      https://blog.csdn.net/lz1213012/article/details/131688724

欢迎关注我的微信技术公众号： 前端组件开发

d848d5658a07453c843277846948c608.png

欢迎加入“前端组件开发学习”交流群，一起学习成长！可关注  “前端组件开发” 公众号后，私信后申请入群。

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

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

相关文章

IP代理检测：判断IP质量优劣要注意什么？

IP代理检测：判断IP质量优劣要注意什么？

做跨境电商的用户们往往对IP代理这个词都不会感到陌生，那么如何去评判IP的优劣势以及再选择IP时需要注意什么呢？ 首先要知道的是IP代理检测是确保网络安全、提高网络访问效率以及满足特定需求的重要步骤。在判断IP代理质量优劣时，有几个关键…
阅读更多...
使用阿里云试用Elasticsearch学习：1.1 基础入门——入门实践

使用阿里云试用Elasticsearch学习：1.1 基础入门——入门实践

阿里云试用一个月：https://help.aliyun.com/search/?kelastic&sceneall&page1 官网试用十五天：https://www.elastic.co/cn/cloud/cloud-trial-overview Elasticsearch中文文档：https://www.elastic.co/guide/cn/elasticsearch/guide…
阅读更多...
剑指Offer题目笔记24（集合的组合、排序）

剑指Offer题目笔记24（集合的组合、排序）

面试题79： 问题： ​ 输入一个不含重复数字的数据集合，找出它的所有子集。 解决方案： ​ 使用回溯法。子集就是从一个集合中选出若干元素。如果集合中包含n个元素，那么生成子集可以分为n步，每一步从集合中…
阅读更多...
数据可视化：智慧农业发展的催化剂

数据可视化：智慧农业发展的催化剂

数据可视化在智慧农业中发挥着不可替代的作用。随着科技的不断进步，农业领域也在不断探索创新，以提高生产效率、优化资源利用，从而实现可持续发展。而数据可视化技术的应用，则成为了实现智慧农业目标的重要途径。下面我就从可视化…
阅读更多...
ABAP OOALV标题设置

ABAP OOALV标题设置

ABAP OOALV标题设置 OOALV默认标题是SAP，需要我们自己创建GUI 标题 创建GUI 标题，写好要展示的描述 添加截图中的代码即可。 下面的ALV 报表标题修改的位置在以下代码区域。 这时候通过查询layout（wa_layout TYPE lvc_s_layo&#xff0…
阅读更多...
mini2440移植lvgl（v8.2）

mini2440移植lvgl（v8.2）

目录 概述 1 下载源码 1.1 登录LVGL git地址 1.2 LVGL linux平台上的库文件介绍 1.3 下载代码 1.3.1 下载lvgl 1.3.2 下载lv_drivers 1.3.3 下载lv_port_linux_frame_buffer 2 配置编译环境 2.1 创建工程目录 2.2 完善工程目录下的文件 2.2.1 构建工程文件 2.2.2 匹…
阅读更多...
Oracle常用sql命令（新手）

Oracle常用sql命令（新手）

1、备份单张表 创建复制表结构 create table employeesbak as select * from cims.employees 如果只复制表结构，只需要在结尾加上 where 10 插入数据 insert into employeesbak select * from cims.employees 删除一条数据 delete from…
阅读更多...
水泥设备如何实现物联网远程监控？

水泥设备如何实现物联网远程监控？

水泥设备如何实现物联网远程监控？ 在当今的工业4.0时代，水泥行业正在经历一场深度的技术革新，其中构建智慧工厂并采用物联网远程监控解决方案成为了提升生产效率、保障产品质量、实现节能减排的关键路径。该方案通过集成先进的信息技术、物联…
阅读更多...
list使用与模拟实现

list使用与模拟实现

目录 list使用 reverse sort unique splice list模拟实现 类与成员函数声明 节点类型的定义 非const迭代器的实现 list成员函数 构造函数 尾插 头插 头删 尾删 任意位置插入 任意位置删除 清空数据 析构函数 拷贝构造函数 赋值重载函数 const迭代器的设计 …
阅读更多...
【PostgreSQL】用pgAdmin轻松管理PostgreSQL

【PostgreSQL】用pgAdmin轻松管理PostgreSQL

pgAdmin 是一个功能强大的开源Web界面工具，专为管理和维护PostgreSQL数据库而设计。它提供了一个直观的图形界面，使得用户能够轻松地执行复杂的数据库操作，如查询、更新、导入/导出数据以及管理数据库对象等。pgAdmin 支持几乎所有的PostgreS…
阅读更多...
EasyExcel 模板导出excel、合并单元格及单元格样式设置。 Freemarker导出word 合并单元格

EasyExcel 模板导出excel、合并单元格及单元格样式设置。 Freemarker导出word 合并单元格

xls文件： 后端代码： InputStream filePath this.getClass().getClassLoader().getResourceAsStream(templateFile);// 根据模板文件生成目标文件ExcelWriter excelWriter EasyExcel.write(orgInfo.getFilename()).excelType(ExcelTypeEnum.XLS).withTe…
阅读更多...
redis 数据库的安装及使用方法

redis 数据库的安装及使用方法

目录 一 关系数据库与非关系型数据库 （一）关系型数据库 1，关系型数据库是什么 2，主流的关系型数据库有哪些 3，关系型数据库注意事项 （二）非关系型数据库 1，非关系型数据库是…
阅读更多...
37.HarmonyOS鸿蒙系统 App(ArkUI) 创建第一个应用程序hello world

37.HarmonyOS鸿蒙系统 App(ArkUI) 创建第一个应用程序hello world

HarmonyOS App(ArkUI) 创建第一个应用程序helloworld 线性布局 1.鸿蒙应用程序开发app_hap开发环境搭建 3.DevEco Studio安装鸿蒙手机app本地模拟器 打开DevEco Studio,点击文件-》新建 双击打开index.ets 复制如下代码： import FaultLogger from ohos.faultL…
阅读更多...
鸿蒙OS元服务开发说明：【WebGL网页图形库开发接口】

鸿蒙OS元服务开发说明：【WebGL网页图形库开发接口】

一、场景介绍 WebGL主要帮助开发者在前端开发中完成图形图像的相关处理，比如绘制彩色图形等。目前该功能仅支持使用兼容JS的类Web开发范式开发。 二、接口说明 表1 WebGL主要接口列表 鸿蒙OS开发更多内容↓点击HarmonyOS与OpenHarmony技术鸿蒙技术文档开发知识更…
阅读更多...
elment UI el-date-picker 月份组件选定后提交后台页面显示正常，提交后台字段变成时区格式

elment UI el-date-picker 月份组件选定后提交后台页面显示正常，提交后台字段变成时区格式

需求&#xff1a;要实现一个日期的月份选择<el-date-picker :typeformData.dateType :value-formatdateFormat v-modelformData.leaveFactoryDateplaceholder选择月份></el-date-picker>错误示例&#xff1a;将日期显示类型(type)dateType或将日期绑定值的格式(val…
阅读更多...
Java SpringBoot中优雅地判断一个对象是否为空

Java SpringBoot中优雅地判断一个对象是否为空

在Java中&#xff0c;可以使用以下方法优雅地判断一个对象是否为空&#xff1a; 使用Objects.isNull()方法判断对象是否为空&#xff1a; import java.util.Objects;if (Objects.isNull(obj)) {// obj为空的处理逻辑 }使用Optional类优雅地处理可能为空的对象&#xff1a; impo…
阅读更多...
为何网易游戏会选择引入OceanBase数据库

为何网易游戏会选择引入OceanBase数据库

本文作者&#xff1a;田维繁&#xff0c;网易游戏关系型数据库小组负责人 作为中国游戏开发领域的佼佼者&#xff0c;网易游戏始终站在网络游戏自主研发的前沿。其产品及周边产品线丰富多样&#xff0c;因此&#xff0c;为满足各种业务场景的需求&#xff0c;需要多种不同的数据…
阅读更多...
XRDP登录ubuntu桌面闪退问题

XRDP登录ubuntu桌面闪退问题

修改 /etc/xrdp/startwm.sh unset DBUS_SESSION_BUS_ADDRESS unset XDG_RUNTIME_DIR . $HOME/.profile
阅读更多...
ensp华为AC+AP上线配置

ensp华为AC+AP上线配置

AR1配置&#xff1a; <Huawei>system-view # 进入系统视图<Huawei>sysname R1 # 设备重命名[R1]dhcp enable # 开启DHCP功能[R1]interface GigabitEthernet0/0/0 # 进入接口 [R1-GigabitEthernet0/0/0]ip address 192.168.0.1 23 # 配置接口地址 [R1-GigabitE…
阅读更多...
教育信创 | 云轴科技ZStack联合飞腾发布全场景教育信创白皮书

教育信创 | 云轴科技ZStack联合飞腾发布全场景教育信创白皮书

随着数字化时代的到来&#xff0c;教育行业正面临着前所未有的挑战与机遇。为了推动教育行业的数字化转型和信创人才培养&#xff0c;云轴科技ZStack联合飞腾于3月28日正式发布了《教育行业数字化自主创新飞腾生态解决方案白皮书》&#xff08;简称《教育白皮书》&#xff09;。…
阅读更多...
最新文章

Copyright @ 2022~2023