菜单权限和按钮权限设置

开发菜单权限

• 统计项目所有的路由

• 第一步：拆分路由

  • 常量（静态）路由：所有人都可以访问的路由
  • 异步路由：不同身份有人可以访问，有人不能访问
  • 任意路由

• 第二步：计算用户需要的异步路由

  • 封装函数

    //用于过滤当前用户需要展示的异步路由
    function filterAsyncRoute(asnycRoute: any, routes: any) {
      return asnycRoute.filter((item: any) => {
        if (routes.includes(item.name)) {
          if (item.children && item.children.length > 0) {
            item.children = filterAsyncRoute(item.children, routes)
          }
          return true
        }
      })
    }
    

  • 传参计算

    //计算当前用户需要展示的异步路由
    const userAsyncRoute = filterAsyncRoute(
    	cloneDeep(asyncRoute),
    	result.data.routes,
    )
    

  • 整理所有路由并进行添加

    //菜单需要的数据整理完毕
    this.menuRoutes = [...constantRoute, ...userAsyncRoute, ...anyRoute]
    //目前路由器管理的只有常量路由:用户计算完毕异步路由、任意路由动态追加
    ;[...userAsyncRoute, ...anyRoute].forEach((route: any) => {
    	router.addRoute(route)
    })
    

• 第三步：退出清空用户异步路由

  • 提前存储用户的异步路由名称

    this.deleteRoutes = result.data.routes
    

  • 退出登录清空数据

    router.getRoutes().forEach(item => {
    	if (this.deleteRoutes.includes(item.name as string)) {
    		router.removeRoute(item.name as string);
    	}
    });
    this.deleteRoutes = []
    

按钮权限问题

• 提前存储用户的按钮权限

• this.buttons = result.data.buttons
  

  创建全局自定义指令文件src/directive/has.ts文件

  import pinia from '@/store'
  import useUserStore from '@/store/modules/user'
  let userStore = useUserStore(pinia)
  
  export const isHasButton = (app: any) => {
    //全局自定义指令，实现按钮的权限
    app.directive('has', {
      //使用这个全局自定义指令的DOM|组件挂载完毕会执行一次
      mounted(el: any, options: any) {
        //自定义指令右侧的数值不在用户信息的buttons数组中，去除该节点
        if (!userStore.buttons.includes(options.value)) {
          el.parentNode.removeChild(el)
        }
      }
    })
  }
  

• 找到需要设置权限的按钮添加v-has即可

   <el-button
          type="primary"
          size="default"
          icon="Plus"
          @click="addTrademark"
          v-has="'btn.Trademark.add'"
        >
          添加品牌
        </el-button>