admin 管理员组文章数量: 887021
pure
分成页面权限(ex:权限管理page) & 标签节点权限(ex:下载按钮)
【九州地址娜娜手机𝕍找看看nay3989提供】以下是范例：
/*** 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, 是否是小孩
本文标签： pure
版权声明：本文标题：pure 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1687704936h131348.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论