JeeSite 快速开发平台
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V4 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
官方网站
    • 平台简介
    • 架构特点
    • 技术选型
    • 功能介绍
    • 安装部署
    • 常见问题
    • 目录结构
    • 更新日志
    • Vue 文档
    • BPM 文档
    • Cloud 文档
V4 演示
Vue 演示
💖联系
  • 我要提意见、文档纠错
  • JeeSite 代码库, 请⭐Star关注
  • JeeSite Vue 代码库, 请⭐关注
  • Spring Cloud 微服务架构
  • JeeSite 手机端/移动端
  • Flowable 中国式工作流
  • OAauth2 统一认证服务器
  • 政务内外网环境中间件
  • 访问 ThinkGem 官方博客
  • 点击进入,下拉查看动态
  • 快速了解

  • 开发手册

  • Vue 开发手册

    • Vue 分离版本介绍
    • 快速开始、安装部署
    • 配置参数、主题配置
    • 前端权限、按钮权限
      • 权限控制
        • 函数方式
        • 组件方式
        • 指令方式
      • 表格列权限
      • 表格操作列权限
      • 表单字段权限
      • 弹窗按钮权限
    • BasicForm 表单组件
    • BasicTable 表格组件
    • 源码解析、表单列表
    • 常用组件库、Hooks
    • 图标 Icon Svg 组件
    • 国际化、多语言
    • Less CSS 样式库
    • 引入外部依赖
    • 分离版 ★ 常见问题 ★
  • 扩展功能专题

  • 云服务技术架构

  • 技术服务与支持

Vue 前端权限控制、按钮权限、多种方式

# 权限控制

# 函数方式

usePermission (opens new window) 还提供了按钮级别的权限控制。

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 组件方式

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 指令方式

提示

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

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

# 表格列权限

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

# 表格操作列权限

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

# 表单字段权限

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'),
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 弹窗按钮权限

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

<BasicDrawer :okAuth="'test:testData:edit'" />
1
进入 JeeSite 源码仓库页面,点击右上角 ⭐ Star 加星关注。

← 配置参数、主题配置 BasicForm 表单组件→

联系我们:s.jeesite.com  |  微信号:jeesitex  |  邮箱:jeesite@163.com
© 2013-2023 济南卓源软件有限公司 版权所有 | Theme Vdoing

关注 JeeSite 公众号,了解最新动态

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式