分成页面权限(ex:权限管理page) & 标签节点权限(ex:下载按钮)

【九州地址娜娜手机𝕍找看看kwk3589提供】以下是范例：

/**
 * admin ： 管理员角色
 * common ： 普通角色
 */

const permissionRouter = {
  path: "/permission",
  meta: {
    title: "权限管理",
    icon: "lollipop",
    rank: 10
  },
  children: [
    {
      path: "/permission/page/index",
      name: "PermissionPage",
      meta: {
        title: "页面权限",
        roles: ["admin", "common"]
      }
    },
    {
      path: "/permission/button/index",
      name: "PermissionButton",
      meta: {
        title: "按钮权限",
        roles: ["admin", "common"],
        auths: ["btn_add", "btn_edit", "btn_delete"]
      }
    }
  ]
};

可以看到路由meta里面都有 roles 不同角色能观看不同网页page

auths则控制了该page哪些元素节点(ex:按钮) 是否会出现

 

共有3个控管方式

1.元件包住

2.v-if="hasAuth('btn_add')" v-if判断

3.自订指令方式(了解directives )

3个都支援传入字串&阵列字串

程式码范例

<script setup lang="ts">
import { type CSSProperties, computed } from "vue";
import { hasAuth, getAuths } from "@/router/utils";

defineOptions({
  name: "PermissionButton"
});

const elStyle = computed((): CSSProperties => {
  return {
    width: "85vw",
    justifyContent: "start"
  };
});
</script>

<template>
  <el-space direction="vertical" size="large">
    <el-tag :style="elStyle" size="large" effect="dark">
      当前拥有的code列表：{{ getAuths() }}
    </el-tag>

    <el-card shadow="never" :style="elStyle">
      <template #header>
        <div class="card-header">组件方式判断权限</div>
      </template>
      <Auth :value="['btn_add', 'btn_edit', 'btn_delete']">
        <el-button type="danger">
          拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
        </el-button>
      </Auth>
    </el-card>

    <el-card shadow="never" :style="elStyle">
      <template #header>
        <div class="card-header">函数方式判断权限</div>
      </template>
      <el-button
        type="danger"
        v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
      >
        拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
      </el-button>
    </el-card>

    <el-card shadow="never" :style="elStyle">
      <template #header>
        <div class="card-header">
          指令方式判断权限（该方式不能动态修改权限）
        </div>
      </template>
      <el-button type="danger" v-auth="['btn_add', 'btn_edit', 'btn_delete']">
        拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
      </el-button>
    </el-card>
  </el-space>
</template>

页面后端控制，元素节点会耦合所以btn_add btn_edit，这类的关键字要统一，若后端改了前端会不支援。

构思实际使用

前端打API 登入，取得该帐号的路由表(包含页面权限+元素节点权限)

这样后台要有

0. 功能列表(功能crud)

1.角色管理(角色crud) 该角色有哪些功能(ex: 新增,删除,修改,阅读,下载,列印...etc)

2.帐号管理(帐号crud) 该帐号有哪些角色若有2个角色会做功能联集

会需要知道路由meta作者定义哪些关键字:

/**
//统整需要的栏位 不包含关联
// pure-admin v3.9以上
// 爸爸
1.id
2.path string
3.name string
meta
  4.title string
  5.icon string
  6.showLink boolean
  7.rank number(越小越上面)

//非爸爸 子路由
1.id
2.path string
3.name string
meta
  4.title string
  5.icon string
  6.showLink boolean
  7.roles Array<string>
  8.auths Array<string>
  9.hiddenTag boolean (当前菜单名称 禁止添加到标签页)

 */
 
 共计10个，主要以子路由为主(9) + 顶路由的rank(1)

其他前端用不到的栏位:

isEnabled: 1, 是否启用
menuFunctionIdOfParent: 1, 爸爸是谁
isFather: 1, 是否是爸爸
isChuild: 0, 是否是小孩