pure-admin九州权限系统地址简单读

分成页面权限(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-buttontype="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
meta4.title string5.icon string6.showLink boolean7.rank number(越小越上面)//非爸爸 子路由
1.id
2.path string
3.name string
meta4.title string5.icon string6.showLink boolean7.roles Array<string>8.auths Array<string>9.hiddenTag boolean (当前菜单名称 禁止添加到标签页)*/共计10个，主要以子路由为主(9) + 顶路由的rank(1)

其他前端用不到的栏位:

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