页面权限
管理项目接触最多也最基本的就是权限控制,例如不同的用户对不同页面的操作权限,在同一页面对不同功能按钮的展示和使用等;封装了一个指令权限,能简单快速的实现按钮级别的权限判断
这里涉及到 v-permission
标签,在directive.permission文件夹下;其中包括权限控制 hasPermi.js
,角色控制 hasRole.js
,还有标签的封装 index.js
,见下
4.1 使用权限字符串 v-hasPermi
// 单个
<el-button v-hasPermi="['system:user:add']">存在权限字符串才能看到</el-button>
// 多个
<el-button v-hasPermi="['system:user:add', 'system:user:edit']">包含权限字符串才能看到</el-button>
4.2 使用权限字符串 v-hasRole
// 单个
<el-button v-hasRole="['admin']">管理员才能看到</el-button>
// 多个
<el-button v-hasRole="['role1', 'role2']">包含角色才能看到</el-button>
注意!在某些情况下,是不适合使用 v-hasPermi,如元素标签组件,只能通过手动设置v-if。 可以使用全局权限判断函数,用法和指令 v-hasPermi 类似;例如页面有多个标签组,点击不同标签组下方则会显示不同内容,,不同角色会看到不同的标签组,如果我们这里还是直接用 v-hasPermi 来操作,则被隐藏的是标签组下面的对应内容,但是标签没有被隐藏;这时我们可以用下面这种方式来解决
<template>
<el-tabs>
<!--3. 加入v-if="checkRole/Permi"来操作-->
<el-tab-pane v-if="checkPermi(['system:user:add'])" label="用户管理" name="user">用户管理</el-tab-pane>
<el-tab-pane v-if="checkPermi(['system:user:add', 'system:user:edit'])" label="参数管理" name="menu">参数管理</el-tab-pane>
<el-tab-pane v-if="checkRole(['admin'])" label="角色管理" name="role">角色管理</el-tab-pane>
<el-tab-pane v-if="checkRole(['admin','common'])" label="定时任务" name="job">定时任务</el-tab-pane>
</el-tabs>
</template>
<script>
import { checkPermi, checkRole } from "@/utils/permission"; // 1. 导入权限判断函数
export default{//2. 对判断函数进行引用
methods: {
checkPermi,
checkRole
}
}
</script>