前提:在路由对象里里要提现出组件里元素的权限又哪些,一般情况下,后端在返回路由权限的时候会给我们返回一组由权限标识的数组。(标识应该是唯一的),路由权限的具体实现请看根据权限路由配置侧边栏菜单(vue3+ts)
一、路由对象携带元素权限标识
我这里标识字段为authCode ,一般情况下,会把标识字段authCode放到路由对象的meta里面。
路由对象示例如下:
{
name: 'approve',
path: '/approve',
meta:{
title:'菜单',
authCode:['create','edit','delete']
},
component: () => import('@/views/approve/index.vue')
}
二、定义 自定义指令
接着我们创建一个directive文件夹,在文件夹里创建一个v-auth.ts文件(自定义指令一般都是v-的格式),文件代码如下:
import { app } from '@/utils'
/** 权限指令 */
export const auth = {
mounted(el: any, binding: any, vnode: any, prevVnode: any){
/** 获取路由对象 */
const route = app.route
const authCode = binding.value || binding.arg
if(route.meta.authCode && authCode) {
const code = route.meta.authCode
if(Array.isArray(code)) {
if(code.indexOf(authCode) == -1) el.remove()
} else if(code != authCode) {
el.remove()
}
}
}
}
三、使用自定义指令
如何在组件里使用自定义指令
如果是单个权限,直接v-auth:edit即可,如果拥有权限就会在组件中显示,如果没有权限就不会显示。代码如下:
<div class="bg-white p-4 mb-4" v-auth:create>
<a-button @click="edit()" type="primary" class="!h-10" style="width:102px">新建菜单
</a-button>
</div>
如果拥有多个权限,可使用v-auth:['create','edit']数组的格式书写,同样可以生效,代码如下:
<div class="bg-white p-4 mb-4" v-auth:['create','edit']>
<a-button @click="edit()" type="primary" class="!h-10" style="width:102px">新建菜单
</a-button>
</div>