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

演示地址

1. 地址：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框架下载地址

• 码云Gitee：https://gitee.com/thinkgem/jeesite-vue

附框架服务端下载地址

• 码云Gitee：https://gitee.com/thinkgem/jeesite4/tree/v5.5/

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

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