feat: ui permission binding

see https://github.com/halo-dev/halo/pull/2260

src/main.ts

@@ -144,9 +144,7 @@ async function loadCurrentUser() {
   const { data: user } = await apiClient.user.getCurrentUserDetail();
   app.provide<User>("currentUser", user);
 
-  const { data: currentPermissions } = await apiClient.user.getPermissions(
-    user.metadata.name
-  );
+  const { data: currentPermissions } = await apiClient.user.getPermissions("-");
   const roleStore = useRoleStore();
   roleStore.$patch({
     permissions: currentPermissions,
@@ -174,7 +172,7 @@ async function loadCurrentUser() {
 })();
 
 async function initApp() {
-  // TODO 实验性特性
+  // TODO 实验性
   const theme = localStorage.getItem("theme");
   if (theme) {
     document.body.classList.add(theme);

src/modules/system/plugins/PluginDetail.vue

@@ -213,7 +213,7 @@ onMounted(handleFetchPlugin);
               </VTag>
             </p>
           </div>
-          <div>
+          <div v-permission="['system:plugins:manage']">
             <VSwitch
               :model-value="isStarted"
               @change="handleChangePluginStatus"

src/modules/system/plugins/PluginList.vue

@@ -74,7 +74,7 @@ onMounted(handleFetchPlugins);
       <IconPlug class="mr-2 self-center" />
     </template>
     <template #actions>
-      <VButton type="secondary">
+      <VButton v-permission="['system:plugins:manage']" type="secondary">
         <template #icon>
           <IconAddCircle class="h-full w-full" />
         </template>
@@ -274,13 +274,19 @@ onMounted(handleFetchPlugins);
                   <time class="text-sm text-gray-500" datetime="2020-01-07">
                     {{ plugin.metadata.creationTimestamp }}
                   </time>
-                  <div class="flex items-center">
+                  <div
+                    v-permission="['system:plugins:manage']"
+                    class="flex items-center"
+                  >
                     <VSwitch
                       :model-value="isStarted(plugin)"
                       @click="handleChangeStatus(plugin)"
                     />
                   </div>
-                  <span class="cursor-pointer">
+                  <span
+                    v-permission="['system:plugins:manage']"
+                    class="cursor-pointer"
+                  >
                     <IconSettings @click.stop="handleRouteToDetail(plugin)" />
                   </span>
                 </div>

src/modules/system/plugins/module.ts

@@ -15,11 +15,17 @@ export default definePlugin({
           path: "",
           name: "Plugins",
           component: PluginList,
+          meta: {
+            permissions: ["system:plugins:view"],
+          },
         },
         {
           path: ":pluginName",
           name: "PluginDetail",
           component: PluginDetail,
+          meta: {
+            permissions: ["system:plugins:view"],
+          },
         },
       ],
     },

src/modules/system/roles/RoleDetail.vue

@@ -154,7 +154,7 @@ onMounted(() => {
       <IconShieldUser class="mr-2 self-center" />
     </template>
     <template #actions>
-      <VButton type="secondary">
+      <VButton v-permission="['system:roles:manage']" type="secondary">
         <template #icon>
           <IconGitBranch class="h-full w-full" />
         </template>
@@ -345,7 +345,7 @@ onMounted(() => {
               </dd>
             </div>
           </dl>
-          <div class="p-4">
+          <div v-permission="['system:roles:manage']" class="p-4">
             <VButton
               :loading="formState.saving"
               type="secondary"

src/modules/system/roles/RoleList.vue

@@ -56,7 +56,11 @@ onMounted(() => {
       <IconShieldUser class="mr-2 self-center" />
     </template>
     <template #actions>
-      <VButton type="secondary" @click="createVisible = true">
+      <VButton
+        v-permission="['system:roles:manage']"
+        type="secondary"
+        @click="createVisible = true"
+      >
         <template #icon>
           <IconAddCircle class="h-full w-full" />
         </template>
@@ -198,7 +202,10 @@ onMounted(() => {
                   <time class="text-sm text-gray-500" datetime="2020-01-07">
                     2020-01-07
                   </time>
-                  <span class="cursor-pointer">
+                  <span
+                    v-permission="['system:roles:manage']"
+                    class="cursor-pointer"
+                  >
                     <IconSettings />
                   </span>
                 </div>

src/modules/system/roles/module.ts

@@ -14,11 +14,17 @@ export default definePlugin({
           path: "roles",
           name: "Roles",
           component: RoleList,
+          meta: {
+            permissions: ["system:roles:view"],
+          },
         },
         {
           path: "roles/:name",
           name: "RoleDetail",
           component: RoleDetail,
+          meta: {
+            permissions: ["system:roles:view"],
+          },
         },
       ],
     },

src/modules/system/users/UserList.vue

@@ -84,12 +84,14 @@ onMounted(() => {
 <template>
   <UserEditingModal
     v-model:visible="editingModal"
+    v-permission="['system:users:manage']"
     :user="selectedUser"
     @close="handleFetchUsers"
   />
 
   <UserPasswordChangeModal
     v-model:visible="passwordChangeModal"
+    v-permission="['system:users:manage']"
     :user="selectedUser"
     @close="handleFetchUsers"
   />
@@ -100,13 +102,22 @@ onMounted(() => {
     </template>
     <template #actions>
       <VSpace>
-        <VButton :route="{ name: 'Roles' }" size="sm" type="default">
+        <VButton
+          v-permission="['system:roles:view']"
+          :route="{ name: 'Roles' }"
+          size="sm"
+          type="default"
+        >
           <template #icon>
             <IconUserFollow class="h-full w-full" />
           </template>
           角色管理
         </VButton>
-        <VButton type="secondary" @click="editingModal = true">
+        <VButton
+          v-permission="['system:users:manage']"
+          type="secondary"
+          @click="editingModal = true"
+        >
           <template #icon>
             <IconAddCircle class="h-full w-full" />
           </template>
@@ -126,6 +137,7 @@ onMounted(() => {
             <div class="mr-4 hidden items-center sm:flex">
               <input
                 v-model="checkAll"
+                v-permission="['system:users:manage']"
                 class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                 type="checkbox"
               />
@@ -252,6 +264,7 @@ onMounted(() => {
               <div class="mr-4 hidden items-center sm:flex">
                 <input
                   v-model="checkAll"
+                  v-permission="['system:users:manage']"
                   class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                   type="checkbox"
                 />
@@ -304,10 +317,12 @@ onMounted(() => {
                   <time class="text-sm text-gray-500" datetime="2020-01-07">
                     {{ user.metadata.creationTimestamp }}
                   </time>
-                  <span class="cursor-pointer">
+                  <span
+                    v-permission="['system:users:manage']"
+                    class="cursor-pointer"
+                  >
                     <FloatingDropdown>
                       <IconSettings />
-
                       <template #popper>
                         <div class="links-w-48 links-p-2">
                           <VSpace class="links-w-full" direction="column">
@@ -319,7 +334,6 @@ onMounted(() => {
                               修改资料
                             </VButton>
                             <VButton
-                              v-permission="['system:users:manage']"
                               block
                               @click="handleOpenPasswordChangeModal(user)"
                             >

src/modules/system/users/module.ts

@@ -33,6 +33,9 @@ export default definePlugin({
               path: "",
               name: "Users",
               component: UserList,
+              meta: {
+                permissions: ["system:users:view"],
+              },
             },
           ],
         },

src/router/guards/permission.ts

@@ -11,7 +11,7 @@ export function setupPermissionGuard(router: Router) {
       const flag = hasPermission(
         Array.from(uiPermissions),
         meta.permissions as string[],
-        false
+        true
       );
       if (!flag) {
         next({ name: "Forbidden" });

src/utils/__tests__/permission.spec.ts

@@ -6,10 +6,10 @@ describe("hasPermission", () => {
     const uiPermissions = ["system:post:manage", "system:post:view"];
 
     expect(hasPermission(uiPermissions, ["system:post:manage"], false)).toBe(
-      false
+      true
     );
     expect(hasPermission(uiPermissions, ["system:post:view"], false)).toBe(
-      false
+      true
     );
     expect(hasPermission(uiPermissions, ["system:post:view"], true)).toBe(true);
     expect(

src/utils/permission.ts

@@ -22,5 +22,5 @@ export function hasPermission(
     return true;
   }
 
-  return !!(!any && isEqual(uiPermissions, targetPermissions));
+  return !!(!any && isEqual(intersection, targetPermissions));
 }