前端手册

权限使用

封装了一个指令权限,能简单快速的实现按钮级别的权限判断。v-permission

使用权限字符串 v-hasPermi

// 单个
<el-button v-hasPermi="['system:user:add']">包含权限字符串才能看到</el-button>
// 多个
<el-button v-hasPermi="['system:user:add', 'system:user:edit']">包含权限字符串才能看到</el-button>
1
2
3
4

使用角色字符串 v-hasRole

// 单个
<el-button v-hasRole="['admin']">管理员才能看到</el-button>
// 多个
<el-button v-hasRole="['role1', 'role2']">包含角色才能看到</el-button>
1
2
3
4

提示

在某些情况下,它是不适合使用v-hasPermi,如元素标签组件,只能通过手动设置v-if。 可以使用全局权限判断函数,用法和指令 v-hasPermi 类似。

<template>
  <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">管理员可以看到这</el-tab-pane>
  <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">编辑员可以看到这</el-tab-pane>
  <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">管理或编辑员都可以看到这一点</el-tab-pane>
</template>

<script>
import checkPermission from '@/utils/permission' // 权限判断函数

export default{
   methods: {
    checkPermission
   }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

待补充

待补充