权限管理

目录结构

代码位置：/src/router

后端控制 与 前端控制 文件是相互独立的（互不影响），后端控制 不需要 roles 字段

├── router (存放路由信息)
	├── backEnd.ts (后端控制)
	├── frontEnd.ts (前端控制)
	├── index.ts (公用函数，路由拦截等)
	└── route.ts (路由菜单数据)

菜单权限

后端路由配置

• 动态在后台接口请求当前登录用的权限菜单
• 将菜单数据 放入requestOldRoutes.ts 缓存中

/**
 * 后端控制路由：初始化方法，防止刷新时路由丢失
 * @method NextLoading 界面 loading 动画开始执行
 * @method useUserInfo().setUserInfos() 触发初始化用户信息 pinia
 * @method useRequestOldRoutes().setRequestOldRoutes() 存储接口原始路由（未处理component），根据需求选择使用
 * @method setAddRoute 添加动态路由
 * @method setFilterMenuAndCacheTagsViewRoutes 设置路由到 pinia routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
 */
export async function initBackEndControlRoutes() {
  // 界面 loading 动画开始执行
  if (window.nextLoading === undefined) NextLoading.start();
  // 无 token 停止执行下一步
  if (!Session.get('token')) return false;
  // 触发初始化用户信息 pinia
  await useUserInfo().setUserInfos();
  // 获取路由菜单数据
  var res = await getBackEndControlRoutes();
  // 无登录权限时，添加判断
  if (res.data.length <= 0) return Promise.resolve(true);
  // 存储接口原始路由（未处理component），根据需求选择使用
  useRequestOldRoutes().setRequestOldRoutes(JSON.parse(JSON.stringify(res.data)));
  // 处理路由（component），替换 dynamicRoutes（/@/router/route）第一个顶级 children 的路由
  dynamicRoutes[0].children = await backEndComponent(res.data);
  // 添加动态路由
  await setAddRoute();
  // 设置路由到 pinia routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
  setFilterMenuAndCacheTagsViewRoutes();
}

按钮权限

数据获取

• 1、按钮权限可在用户进行登录时，请求接口就返回全部按钮权限。

权限方式

1. 组件：您可能需要了解 插槽 slot

• /@/components/auth

• /@/components/auths

• /@/components/auth-all

• 页面中使用

<template>
  <!-- 1.单个权限验证，单个权限验证（v-auth="xxx"） -->

  <Auth :value="'system:sysNotice:edit'">
    <el-button size="small" text type="primary">删除</el-button>
  </Auth>

  <!-- 2.多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）-->

  <Auths :value="['system:sysNotice:edit','system:sysNotice:dell']">
    <el-button size="small" text type="primary">删除</el-button>
  </Auths>

  <!-- 3.多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）-->
  
  <AuthAll :value="['system:sysNotice:edit','system:sysNotice:dell']">
    <el-button size="small" text type="primary">删除</el-button>
  </AuthAll>
</template>

<script setup lang="ts" name="xxx">
  import {defineAsyncComponent} from 'vue';
  // 局部引入
  const Auth = defineAsyncComponent(() => import('/@/components/auth/auth.vue'));
  const Auths = defineAsyncComponent(() => import('/@/components/auth/auths.vue'));
  const AuthAll = defineAsyncComponent(() => import('/@/components/auth/authAll.vue'));
</script>

2. 方式二：指令：/@/directive/authDirective.ts，您可能需要了解 自定义指令 directive

• 页面中使用

<template>
  <!-- 1.单个权限验证，单个权限验证（v-auth="xxx"） -->

  <el-button size="small" text type="primary" v-auth="'system:sysNotice:edit'" >删除</el-button>


  <!-- 2.多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）-->

  <el-button size="small" text type="primary" v-auth="['system:sysNotice:edit','system:sysNotice:dell']" >删除</el-button>


  <!-- 3.多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）-->

  <el-button size="small" text type="primary" v-auth="['system:sysNotice:edit','system:sysNotice:dell']" >删除</el-button>

</template>

<script setup lang="ts" name="xxx">

</script>

3. 函数方式

方法位置：/@/utils/authFunction.ts，用于方法中的判断，使用方法如下

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { auth, auths, authAll } from '/@/utils/authFunction';

// 单个权限验证
const onAuthClick = () => {
  if (!auth('btn.add')) ElMessage.error('抱歉，您没有权限！');
  else ElMessage.success('恭喜，您有权限！');
};
// 多个权限验证，满足一个则为 true
const onAuthsClick = () => {
  if (!auths(['btn.add', 'btn.edit'])) ElMessage.error('抱歉，您没有权限！');
  else ElMessage.success('恭喜，您有权限！');
};
// 多个权限验证，全部满足则为 true
const onAuthAllClick = () => {
  if (!authAll(['btn.add', 'btn.edit')) ElMessage.error('抱歉，您没有权限！');
  else ElMessage.success('恭喜，您有权限！');
};
</script>