IU1314
admin
预览
IU1314
admin
预览

权限管理

介绍

权限管理，主要分为两个部分权限，①角色权限；②数据权限(部门权限),每个用户可以拥有多个角色和部门，但是只能同时激活一个角色和一个部门，可以通过其组合来实现复杂的权限控制。

角色权限

通过对角色的目录,菜单和api进行授权，对于无权限的目录,菜单,在后端返回时，将不会返回相应的路由数据，前端将无法渲染其菜单，实现其权限控制

api 将返回一个 api数组作为权限控制，可精确进行权限控制，即使前端发出请求，后端也会同时拦截，返回500,同时提示无访问权限

按钮级权限控制

使用api权限控制，提供了两个函数(位于src\hooks\util\usePermission.ts) hasPermission 和 hasPermissionALL,在组件中使用v-if控制，如有其他控制条件，写在一起即可。

<el-table-column
    v-if="hasPermission(ApiSysPost.edit, ApiSysPost.delete)"
    align="center"
    label="操作"
    width="160px"
  >
    <template #default="scope">
      <el-button
        v-if="hasPermission(ApiSysPost.edit)"
        :icon="Edit"
        link
        @click="handleUpdate(scope.row)"
      >
        {{ t('common.edit') }}
      </el-button>
      <el-button
        v-if="hasPermission(ApiSysPost.delete)"
        :icon="Delete"
        link
        @click="handleDelete(scope.row)"
      >
        {{ t('common.delete') }}
      </el-button>
    </template>
  </el-table-column>

这是一组在表格中的权限控制，控制是否显示对应按钮

需要提前导入对应api以及hasPermission 函数

import {hasPermission,} from '@/hooks'
import { ApiSysPost } from '@/api/apis'

hasPermission(ApiSysPost.edit, ApiSysPost.delete) 值需要拥有其中一个权限即可显示该列表格，若要多个权限同时拥有才显示，须使用hasPermissionAll(ApiSysPost.edit, ApiSysPost.delete)

对于没有相应api的只是前端使用的按钮，也具有在菜单管理中，设置相应权限标志，有后端返回数据来控制按钮的显示

数据权限

在角色管理中设置数据权限,分为5种情况

const dataScopeOptions = ref([
  { value: '1', label: '全部数据权限' },
  { value: '2', label: '自定数据权限' },
  { value: '3', label: '本部门数据权限' },
  { value: '4', label: '本部门及以下数据权限' },
  { value: '5', label: '仅本人数据权限' },
])

自定义权限,可自定义选择的部门，定义可以查看的数据。

数据权限需要后端配合才能正常使用。

角色和部门切换

右上角个人头像点击下拉菜单切换