权限

项目提供了开箱即用的权限控制，包括路由、菜单权限和页面元素级的细粒度权限控制。

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

基于角色编码

页面权限

基于角色编码的路由权限控制是使用路由信息中的meta.roles与用户信息中的roles进行比对，不匹配的路由的component会被动态修改为/src/views/error-page/NotPermission.vue组件。

提示

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

基于权限标识符

页面权限

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

按钮级权限

指令方式

<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>
......