权限控制使用指南

在实际开发中，权限控制是非常重要的一环。为了方便开发，我们通常会封装指令和函数来实现前端的权限判断。以下是对权限控制的详细总结，涵盖了指令、函数的使用及注意事项。

一、权限指令的使用

若依框架封装了一个 v-hasPermi 指令，用于在 Vue 模板中对元素进行权限控制。该指令可以根据用户是否拥有某个权限来决定是否渲染元素。

1. 使用权限字符串 v-hasPermi

• 单个权限判断

  当用户拥有指定的权限时，按钮才会显示。

  <el-button v-hasPermi="['system:user:add']">存在权限字符串才能看到</el-button>
  

• 多个权限判断

  当用户同时拥有多个指定的权限时，按钮才会显示。

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

2. 使用角色字符串 v-hasRole

类似于 v-hasPermi，v-hasRole 指令用于判断用户是否拥有指定的角色。

• 单个角色判断

  当用户拥有指定角色时，按钮才会显示。

  <el-button v-hasRole="['admin']">管理员才能看到</el-button>
  

• 多个角色判断

  当用户拥有多个角色中的任意一个时，按钮才会显示。

  <el-button v-hasRole="['role1', 'role2']">包含角色才能看到</el-button>
  

二、使用全局权限判断函数

在某些情况下，可能不适合使用指令（例如在 el-tab-pane 这种元素标签中）。此时，可以通过全局的权限判断函数 checkPermi 和 checkRole 来手动控制元素的显示与隐藏。

1. 使用权限判断函数 checkPermi

该函数用于判断用户是否具有指定的权限，返回布尔值，决定元素是否渲染。

示例：

<template>
  <el-tabs>
    <!-- 判断用户是否具有 'system:user:add' 权限 -->
    <el-tab-pane v-if="checkPermi(['system:user:add'])" label="用户管理" name="user">用户管理</el-tab-pane>
    
    <!-- 判断用户是否同时具有 'system:user:add' 和 'system:user:edit' 权限 -->
    <el-tab-pane v-if="checkPermi(['system:user:add', 'system:user:edit'])" label="参数管理" name="menu">参数管理</el-tab-pane>
  </el-tabs>
</template>

<script>
import { checkPermi } from "@/utils/permission"; // 导入权限判断函数

export default {
  methods: {
    checkPermi // 将函数绑定到当前组件的 methods
  }
}
</script>

2. 使用角色判断函数 checkRole

类似于 checkPermi，checkRole 用于判断用户是否拥有指定的角色。

示例：

<template>
  <el-tabs>
    <!-- 判断用户是否具有 'admin' 角色 -->
    <el-tab-pane v-if="checkRole(['admin'])" label="角色管理" name="role">角色管理</el-tab-pane>
    
    <!-- 判断用户是否同时具有 'admin' 或 'common' 角色 -->
    <el-tab-pane v-if="checkRole(['admin', 'common'])" label="定时任务" name="job">定时任务</el-tab-pane>
  </el-tabs>
</template>

<script>
import { checkRole } from "@/utils/permission"; // 导入角色判断函数

export default {
  methods: {
    checkRole // 将函数绑定到当前组件的 methods
  }
}
</script>

三、前后端权限校验的重要性

虽然前端权限校验能提升用户体验，但它只是辅助功能。专业人员可以绕过前端限制直接请求后端接口，因此后端也必须进行严格的权限校验，确保系统安全。

总结

通过 v-hasPermi 和 v-hasRole 指令，结合全局的权限判断函数 checkPermi 和 checkRole，可以轻松实现 Vue.js 项目中的前端权限控制。尽管前端可以做权限校验，但后端的权限校验仍然是不可或缺的部分，它确保了系统的安全性和数据的完整性。