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 以往的设计思想，列表和表单以数据驱动视图，极大简化了业务功能开发，注释分解详见本页最下【源码解析】

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

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

学习准备

VSCode - 推荐 IDE 集成开发工具
Node.js 16 和 git - 开发环境
Vite - 熟悉 Vite 特性
Vue-v3 - 熟悉 Vue 基础语法
TypeScript - 熟悉 TS 基本语法
ES6+ - 熟悉 ES6 基本语法
Vue-Router-v4 - 熟悉 vue-router 基本使用
Vue-Vben-Admin - 熟悉 UI 及表单列表及常用组件使用
Ant-Design-Vue - 熟悉 UI 基本使用

安装使用

如果没有安装 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/#部署到正式服务器

后端服务

安装后台服务 JeeSite v5.x

后台服务端下载地址： https://gitee.com/thinkgem/jeesite4/tree/v5.5/
本地运行
环境准备：JDK 1.8 or 11、17、Maven 3.6+、使用 MySQL 5.7 or 8.0 数据库、其它数据库
下载源码：https://gitee.com/thinkgem/jeesite4/repository/archive/v5.3.zip 并解压
打开文件：/web/src/main/resources/config/application.yml 配置JDBC连接
执行脚本：/web/bin/init-data.bat 初始化数据库
执行脚本：/web/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/
快速运行
环境准备：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

演示地址

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

权限管理实现

如上图所示：在Jeesite后台管理系统中，通过设置不同的角色从而有了不同的权限标识，例如系统管理员对应的权限标识是corpAdmin。

在Jeesite后台管理系统开发中可以使用usePermission函数来管理权限，用户登录后台管理系统后，可以通过usePermission函数来获取当前登录用户权限标识，函数方式是实现权限管理最直接明了的一种方式，且更加灵活，推荐使用哦！

函数方式

usePermission提供了按钮级别的权限控制（即可控制该按钮是否显示）。下面代码实现的是当拥有 [sys:user:view, sys:empUser:view]权限显示该按钮

<template>  <a-button v-if="hasPermission(['sys:user:view', 'sys:empUser:view'])" color="error" class="mx-4">    拥有 [sys:user:view, sys:empUser:view] 权限字符串可见  </a-button></template><script lang="ts">  import { usePermission } from '/@/hooks/web/usePermission';  import { RoleEnum } from '/@/enums/roleEnum';  export default defineComponent({    setup() {      const { hasPermission } = usePermission();      return { hasPermission };    },  });</script>

我们还可以通过usePermission实现对树形组件展示不同的数据，从而实现不同权限展示不同菜单功能，下面代码实现的是当拥有sys:user:view', 'sys:empUser:view权限展示数据gData，其他类型权限展示数据gDataTwo，通过这个示例，我们可以知道使用函数方式是非常方便的，且非常灵活！

<template><a-tree    class="draggable-tree"    v-model:expandedKeys="expandedKeys"    draggable    :tree-data="hasPermission(['sys:user:view', 'sys:empUser:view'])?gData:gDadaTwo"    @dragenter="onDragEnter"    @drop="onDrop"  />  </template>  <script lang="ts">  import { usePermission } from '/@/hooks/web/usePermission';  import { RoleEnum } from '/@/enums/roleEnum';  export default defineComponent({    setup() {      const { hasPermission } = usePermission();      return { hasPermission };    },  });</script>

组件方式

用于项目权限的组件，一般用于按钮级等细粒度权限管理

<template>
  <div>
    <Authority :value="'sys:user:view'">
      <a-button type="primary" block> 只有 sys:user:view 权限字符串的可见 </a-button>
    </Authority>
  </div>
</template>
<script>
  import Authority from '/@/components/Authority';
  import { defineComponent } from 'vue';
  export default defineComponent({
    components: { Authority },
  });
</script>

指令方式

指令方式不能动态更改权限（但使用方法最简单）

<a-button v-auth="'sys:user:view'" type="primary" class="mx-4">  拥有 sys:user:view 权限字符串的可见</a-button>

表格列权限

const columns: BasicColumn[] = [  {    title: '列名1',    dataIndex: 'field1',    width: 160,    // 表格列权限控制，指定权限字符串    auth: 'test:testData:edit',    // 这里还可以使用 usePermission 函数方式进行动态判断权限    ifShow: () => hasPermission('sys:test:view'),    // 根据字段数值判断表格列是否显示    ifShow: () => record.status === '0',  },]

表格操作列权限

const actionColumn: BasicColumn = {  actions: (record: Recordable) => [    {      // 按钮权限控制，指定权限字符串      auth: 'test:testData:edit',      // 这里还可以使用 usePermission 函数方式进行动态判断权限      ifShow: () => hasPermission('sys:test:view'),      // 根据字段数值判断按钮是否显示      ifShow: () => record.status === '0',    },  ],};

表单字段权限

const inputFormSchemas: FormSchema[] = [  {    label: t('是否显示该表单字段'),    field: 'field1',    component: 'Input',    componentProps: {      maxlength: 500,    },    // 根据数据值判断表单控件是否显示（正常渲染控件，只是控制显示隐藏）    show: ({ values }) => record.status === '0',    // 根据数据值判断表单控件是否显示（为 false 时不渲染控件）    ifShow: ({ values }) => record.status === '0',    // 如果有 sys:test:view 查看权限，则显示控件    ifShow: ({ values }) => hasPermission('sys:test:view'),  },

弹窗按钮权限

提交按钮权限，控制按钮是否显示，举例如下：

<BasicDrawer :okAuth="'test:testData:edit'" />

结语

JeeSite Vue3 作为一款引领未来的前端框架，凭借其先进的技术栈和丰富的功能模块，为前端开发者提供了一个全新的开发体验。它让初学者能够快速入门，同时也为团队开发者提供了强大的支持。无论是微小项目还是中大型项目，JeeSite Vue3 都能够提供现成的解决方案和丰富的示例，使开发过程变得更加高效。

附jeesite-vue框架下载地址