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

news2024/11/23 12:36:34

随着技术的飞速发展，前端开发技术日新月异。在这个背景下，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

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【教程】Kotlin语言学习笔记（五）——Lambda表达式与条件控制

【教程】Kotlin语言学习笔记（五）——Lambda表达式与条件控制

写在前面： 如果文章对你有帮助，记得点赞关注加收藏一波，利于以后需要的时候复习，多谢支持！ 【Kotlin语言学习】系列文章 第一章 《认识Kotlin》 第二章 《数据类型》 第三章 《数据容器》 第四章 《方法》 第五章 《L…
阅读更多...
LangChain-03 astream_events 流输出

LangChain-03 astream_events 流输出

内容简介 尝试用 FAISS 或 DocArrayInMemorySearch 将数据向量化后检索astream_events 的效果为 |H|arrison| worked| at| Kens|ho|.|| 安装依赖 # 之前的依赖即可 pip install --upgrade --quiet langchain-core langchain-community langchain-openai # Win或Linux用户可…
阅读更多...
算法学习——LeetCode力扣动态规划篇3（494. 目标和、474. 一和零、518. 零钱兑换 II）

算法学习——LeetCode力扣动态规划篇3（494. 目标和、474. 一和零、518. 零钱兑换 II）

算法学习——LeetCode力扣动态规划篇3 494. 目标和 494. 目标和 - 力扣（LeetCode） 描述 给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 ‘’ 或 ‘-’ ，然后串联起所有整数，可以构造一个 表达式 …
阅读更多...
【xinference】（8）：在autodl上，使用xinference部署qwen1.5大模型，速度特别快，同时还支持函数调用，测试成功！

【xinference】（8）：在autodl上，使用xinference部署qwen1.5大模型，速度特别快，同时还支持函数调用，测试成功！

1，关于xinference https://www.bilibili.com/video/BV14x421U74t/ 【xinference】（8）：在autodl上，使用xinference部署qwen1.5大模型，速度特别快，同时还支持函数调用，测试成功&#…
阅读更多...
系统IO函数接口

系统IO函数接口

目录 前言 一. man手册 1.1 man手册如何查询 1.2 man手册基础 二.系统IO函数接口 三.open打开文件夹 3.1 例1 open打开文件 3.2 open打开文件代码 3.3 例2 创建文件 四.write写文件 4.1 write写文件 五. read读文件 5.1 read读文件与偏移 5.2 偏移细节 5.3 read读文件代码 六.复…
阅读更多...
1,static 关键字.Java

1,static 关键字.Java

目录 1.概述 2.定义格式和使用 2.1 静态变量及其访问 2.2 实例变量及其访问 2.3 静态方法及其访问 2.4 实例方法及其访问 3.小结 1.概述 static表示静态，是Java中的一个修饰符，可以修饰成员方法，成员变量。被static修饰后的&#xff…
阅读更多...
STM32CubeMX配置步骤详解零 —— 引言

STM32CubeMX配置步骤详解零 —— 引言

引子 初识 笔者接触STM32系列MCU有些年头了。初次接触是2015年，那时是在第二空间（北京）科技有限公司上班，是以STM32F407（后缀好像是RGT6或ZGT6，记得不是很清楚了）为主芯片做VR头戴式设备&…
阅读更多...
40道Java经典面试题总结

40道Java经典面试题总结

1、在 Java 中，什么时候用重载，什么时候用重写？ （1）重载是多态的集中体现，在类中，要以统一的方式处理不同类型数据的时候，可以用重载。 （2）重写的使用是建立…
阅读更多...
githacker安装使用

githacker安装使用

githack下载不了文件，换个工具！ 项目地址 WangYihang/GitHacker: 🕷️ A .git folder exploiting tool that is able to restore the entire Git repository, including stash, common branches and common tags. (github.com) 安装 pyth…
阅读更多...
光伏行业项目管理系统解决方案！企智汇光伏项目管理系统！

光伏行业项目管理系统解决方案！企智汇光伏项目管理系统！

光伏行业项目管理系统解决方案旨在通过整合和优化项目管理流程，提高光伏项目的执行效率和质量。以下是企智汇软件详细的光伏行业项目管理系统解决方案的框架： 一、系统概述 企智汇光伏行业项目管理系统是一个集项目规划、执行、监控和收尾于一体的综合…
阅读更多...
Vue3：用Pinia的storeToRefs结构赋值store数据

Vue3：用Pinia的storeToRefs结构赋值store数据

一、情景描述 我们学习了Pinia之后，知道，数据是配置在Pinia的state里面的。 那么，如果有多个字段需要取出来使用，并且不丢失数据的响应式，如何优雅的操作了？ 这里就用到了Pinia的storeToRefs函数 二、案…
阅读更多...
【CANN训练营笔记】AscendCL图片分类应用（C++实现）

【CANN训练营笔记】AscendCL图片分类应用（C++实现）

样例介绍 基于PyTorch框架的ResNet50模型，对*.jpg图片分类，输出各图片所属分类的编号、名称。 环境介绍 华为云AI1s CPU：Intel Xeon Gold 6278C CPU 2.60GHz 内存：8G NPU：Ascend 310 环境准备 下载驱动 wget ht…
阅读更多...
CAPL实现关闭TCP连接的几种方式以及它们的区别

CAPL实现关闭TCP连接的几种方式以及它们的区别

在讲正文前，我们有必要复习下关闭TCP连接的过程：四次挥手。 假设A和B建立TCP连接并进行数据传输，当A的数据发送完后，需要主动发起断开连接的请求： A发送FIN报文，发起断开连接的请求B收到FIN报文后，首先回复ACK确认报文B把自己的数据发送完，发送FIN报文，发起断开连接的…
阅读更多...
探索网红系统功能菜单架构的设计与优化

探索网红系统功能菜单架构的设计与优化

随着社交媒体和数字化内容的普及，网红经济正在成为新兴的产业。在网红经济体系中，网红系统的功能菜单架构对于平台的用户体验和运营效率至关重要。本文将深入探讨网红系统功能菜单架构的设计与优化，为网红经济的发展提供新的思路和方法。 --…
阅读更多...
HWOD：自守数

HWOD：自守数

一、知识点 break只会结束最里面的一层循环 int型数按位比较的时候，可以直接求余比较，无需转换为char型数组后再按下标比较 二、题目 1、描述 自守数是指一个数的平方的尾数等于该数自身的自然数。例如：25^2 625，76^2 5776…
阅读更多...
软考高级架构师：文件管理-位示图概念和例题

软考高级架构师：文件管理-位示图概念和例题

一、AI 讲解 文件管理在操作系统中负责文件的存储、检索、共享和保护。管理空闲空间是其中的一项重要任务，以确保文件系统的高效和灵活性。常见的空闲空间管理方法有空闲区表法、空闲链表法、位示图法和成组链表法。 下面通过表格形式概括这些方法的特点和应用场景…
阅读更多...
Python快速入门系列-9（Python项目实战）

Python快速入门系列-9（Python项目实战）

第九章：Python项目实战 9.1 开发一个简单的Web应用9.1.1 项目概述9.1.2 环境准备9.1.3 项目结构9.1.4 代码实现9.1.4.1 创建数据库模型9.1.4.2 创建视图9.1.4.3 实用工具函数9.1.4.4 运行应用9.1.5 模板设计9.2 数据分析与可视化项目9.2.1 项目概述9.2.2 环境准备9.2.3 数据分…
阅读更多...
file_get_contents(‘php://input‘)； 这个postman要如何传参

file_get_contents(‘php://input‘)； 这个postman要如何传参

在 Postman 中传递参数给 file_get_contents(php://input); 是通过请求的 Body 部分来实现的。使用 Postman 进行 API 接口测试时，可以按照以下步骤来传递参数： 打开 Postman 并创建一个新的请求。在请求的 URL 地址栏输入你的 API 地址。选择请求方法为…
阅读更多...
Spark实战：词频统计

Spark实战：词频统计

文章目录 一、Spark实战：词频统计（一）Scala版1、分步完成词频统计2、一步搞定词频统计 （二）Python版1、分步完成词频统计2、一步搞定词频统计 二、实战总结 一、Spark实战：词频统计 （一&#x…
阅读更多...
【Python时序预测系列】基于ConvLSTM实现单变量时间序列预测（源码）

【Python时序预测系列】基于ConvLSTM实现单变量时间序列预测（源码）

这是我的第252篇原创文章。 一、引言 ConvLSTM是一种融合了卷积神经网络（CNN）和长短期记忆网络（LSTM）的混合神经网络结构，专门用于处理时空序列数据。ConvLSTM结合了CNN对空间特征的提取和LSTM对时间序列建模的能力&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023