選單許可權和按鈕許可權設定

ccqh發表於2024-07-12

開發選單許可權

  • 統計專案所有的路由

  • 第一步：拆分路由

    • 常量（靜態）路由：所有人都可以訪問的路由
    • 非同步路由：不同身份有人可以訪問，有人不能訪問
    • 任意路由

  • 第二步：計算使用者需要的非同步路由

    • 封裝函式

      //用於過濾當前使用者需要展示的非同步路由
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>

相關文章