成都网站建设开发公seo效果分析

hasPermi.ts，具体逻辑根据各自的项目自行设计

import router from '@/router';
import { usePermissionStore } from '@/store';export default {// mounted是指令的一个生命周期mounted(el, binding) {// value 获取用户使用自定义指令绑定的内容const { value } = binding;// 判断用户使用自定义指令，是否使用正确了if (value && value instanceof Array && value.length > 0) {let hasPermission = false;const permissionStore = usePermissionStore();const pagesRoutesMap = permissionStore.pagesRoutesMap;if (pagesRoutesMap.size === 0) {hasPermission = false;} else {// 拿到路由的目的是为了解决多个菜单复用同一个组件，然后组件的同一个按钮不同菜单显示不同的权限的问题const routePath = (router.currentRoute as any)._value.path || '';const target: any = pagesRoutesMap.get(routePath);if (!target) {hasPermission = false;} else {const permissions = target.buttonPermissionList || [];hasPermission = permissions.some((permission) => {return value.includes(permission);});}}// 当用户没有这个按钮权限时，设置隐藏这个按钮if (!hasPermission) {el.parentNode && el.parentNode.removeChild(el);}} else {throw new Error('v-hasPermi value must be an array');}},
};

index.ts

import hasPermi from './hasPermi';export default function directive(app) {app.directive('hasPermi', hasPermi);
}

在main.ts中引入

import directive from '@/directive'; // 自定义指令directive(app);

使用

v-hasPermi="['system:user:add', 'system:user:delete']"