FiveAdmin

权限

FiveAdmin 提供开箱即用的权限控制，包括路由、菜单权限和按钮级的细粒度权限控制。

框架提供了两种权限控制方案：基于角色、基于权限标识。

基于角色编码

页面权限

基于角色编码的路由权限控制是使用路由信息中的 meta.roles 与 用户信息中的 roles 进行比对，不匹配的路由不会被注册。

// 用代码简单说明
const userA = {
  // ...
  roles:['admin']
}
const userB = {
  // ...
  roles:['test']
}
const routeA = {
  path:'home',
  // ...
  meta:{
    roles:['admin']
  }
}
/*
  userA 登录后 routeA 被注册
  userB 登录后 routeA 不被注册
*/

提示

meta.roles 的属性值可以为数组或字符串。

如果不设置 meta.roles 的属性值，此路由永远都会被注册。

如果设置了 meta.roles 的属性值并且为空数组，此路由永远都不会被注册。

按钮级权限

指令方式

<el-button v-hasRole="'admin'"> admin角色可见 </el-button>
<span v-hasRole:or="['admin','test']"> admin或test角色可见 </span>
<div v-hasRole:all="['admin','test']"> admin且test角色可见 </div>

提示

  • v-hasRole:or --> 值可以为字符串和数组，角色值匹配其一就显示组件/标签

  • v-hasRole:all --> 值只可以是数组，角色值全部包含才显示组件/标签

  • v-hasRole --> v-hasRole:or 的简写

函数方式

<template>
  <div>
    <p v-if="hasRole('admin')">admin角色可见</p>
    <p v-if="hasRole(['admin', 'test'])">admin或test角色可见</p>
    <p v-if="hasRoleAll(['admin', 'test'])">admin且test角色可见</p>
  </div>
</template>
<script setup>
import useAuth from '@/hooks/useAuth'
const { hasRole,hasRoleAll } = useAuth()
</script>

提示

  • hasRole(val: String | Array) --> 当前用户角色与 val 值匹配其一即为 true。

  • hasRoleAll(arr: Array) --> 当前用户角色必须包含 arr 中的所有值才为 true

基于权限标识符

页面权限

FiveAdmin 没有基于权限标识符对路由及菜单进行过滤，推荐接入后端时在对应的获取路由的接口中处理，将处理后的路由结果响应给 FiveAdmin。

按钮级权限

指令方式

<el-button v-hasPerm="'sys:menu:add'"> 拥有 sys:menu:add 权限标识码的用户可见 </el-button>
<span v-hasPerm:or="['add','del']"> 拥有 add 或 del 权限标识码的用户可见 </span>
<div v-hasPerm:all="['add','del']"> 拥有 add 且 del 权限标识码的用户可见 </div>

提示

  • v-hasPerm:or --> 值可以为字符串和数组，权限标识码匹配其一就显示组件/标签

  • v-hasPerm:all --> 值只可以是数组，权限标识码全部包含才显示组件/标签

  • v-hasPerm --> v-hasPerm:or 的简写

函数方式

<template>
  <div>
    <el-button v-if="hasPerm('addButton')"> 拥有 addButton 权限标识码的用户可见 </el-button>
    <p v-if="hasPerm(['menu:del', 'menu:add'])"> 拥有 menu:del 或 menu:add 权限标识码的用户可见 </p>
    <p v-if="hasPermAll(['menu', 'menu:add'])"> 拥有 menu 且有 menu:add 权限标识码的用户可见 </p>
  </div>
</template>
<script setup>
import useAuth from '@/hooks/useAuth'
const { hasPerm,hasPermAll } = useAuth()
</script>

提示

  • hasPerm(val: String | Array) --> 当前用户权限标识码与 val 值匹配其一即为 true

  • hasPermAll(arr: Array) --> 当前用户权限标识码必须包含 arr 中的所有值才为 true

提示

函数方式对比指令方式，无论是基于角色还是基于权限标识，函数方式是响应式的。这好像并没有什么用。

通配符

暂时没有，已考虑新增此功能。

支持字符串通配符匹配校验

? 字符匹配任何单个字符。

* 字符匹配任何字符序列。

<p v-hasPerm="'*'"> 所有权限可见 </p>
......

后端接入推荐

推荐使用基于权限标识符的方式接入后端，因为基于角色的方式接入后端作者没有测试，在作者的前后端新项目中也暂时没有用到。有兴趣尝试基于角色方式接入后端的伙伴们，在遇到问题时欢迎反馈。

Last Updated:
Contributors: zhangyuge