mirror of https://github.com/halo-dev/halo-admin
fix: the issue that role display name (#847)
#### What type of PR is this? /kind improvement #### What this PR does / why we need it: 为系统初始化的角色添加显示名称 #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/3257 #### Screenshots: <img width="1668" alt="image" src="https://user-images.githubusercontent.com/21301288/218020794-696420c4-69bb-4422-9409-482bb2aff708.png"> #### Special notes for your reviewer: 测试方式: 1. Halo 需要切换到:https://github.com/halo-dev/halo/pull/3280 2. 检查 Console 端显示的系统角色是否正常。 3. 新建若干自定义角色,检查名称是否正常。 #### Does this PR introduce a user-facing change? ```release-note 优化 Console 端用户角色标识的显示名称。 ```pull/857/head
parent
381c3e2484
commit
aca67f683c
|
@ -27,6 +27,7 @@ import sortBy from "lodash.sortby";
|
|||
import { useRoleStore } from "@/stores/role";
|
||||
import { hasPermission } from "@/utils/permission";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { rbacAnnotations } from "@/constants/annotations";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
@ -56,11 +57,16 @@ const handleLogout = () => {
|
|||
};
|
||||
|
||||
const currentRole = computed(() => {
|
||||
return JSON.parse(
|
||||
userStore.currentUser?.metadata.annotations?.[
|
||||
"rbac.authorization.halo.run/role-names"
|
||||
] || "[]"
|
||||
)[0];
|
||||
const names = JSON.parse(
|
||||
userStore.currentUser?.metadata.annotations?.[rbacAnnotations.ROLE_NAMES] ||
|
||||
"[]"
|
||||
);
|
||||
|
||||
if (names.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
return roleStore.getRoleDisplayName(names[0]);
|
||||
});
|
||||
|
||||
// Global Search
|
||||
|
@ -228,7 +234,7 @@ onMounted(generateMenus);
|
|||
<div class="flex text-sm font-medium">
|
||||
{{ userStore.currentUser?.spec.displayName }}
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div v-if="currentRole" class="flex">
|
||||
<VTag>
|
||||
<template #leftIcon>
|
||||
<IconUserSettings />
|
||||
|
|
|
@ -240,6 +240,9 @@ async function initApp() {
|
|||
|
||||
await loadUserPermissions();
|
||||
|
||||
const roleStore = useRoleStore();
|
||||
await roleStore.fetchRoles();
|
||||
|
||||
try {
|
||||
await loadPluginModules();
|
||||
} catch (e) {
|
||||
|
|
|
@ -36,7 +36,9 @@ import Fuse from "fuse.js";
|
|||
import { usePermission } from "@/utils/permission";
|
||||
import { roleLabels } from "@/constants/labels";
|
||||
import { SUPER_ROLE_NAME } from "@/constants/constants";
|
||||
import { useRoleStore } from "@/stores/role";
|
||||
|
||||
const roleStore = useRoleStore();
|
||||
const { currentUserHasPermission } = usePermission();
|
||||
|
||||
const editingModal = ref<boolean>(false);
|
||||
|
@ -91,6 +93,7 @@ const handleOpenEditingModal = (role: Role) => {
|
|||
const onEditingModalClose = () => {
|
||||
selectedRole.value = undefined;
|
||||
handleFetchRoles();
|
||||
roleStore.fetchRoles();
|
||||
};
|
||||
|
||||
const handleCloneRole = async (role: Role) => {
|
||||
|
@ -140,6 +143,7 @@ const handleDelete = async (role: Role) => {
|
|||
console.error("Failed to delete role", e);
|
||||
} finally {
|
||||
handleFetchRoles();
|
||||
roleStore.fetchRoles();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
|
@ -6,13 +6,20 @@ import { useRouter } from "vue-router";
|
|||
import type { User } from "@halo-dev/api-client";
|
||||
import { rbacAnnotations } from "@/constants/annotations";
|
||||
import { formatDatetime } from "@/utils/date";
|
||||
import { useRoleStore } from "@/stores/role";
|
||||
|
||||
const user = inject<Ref<User>>("user");
|
||||
|
||||
const roleStore = useRoleStore();
|
||||
|
||||
const roles = computed(() => {
|
||||
return JSON.parse(
|
||||
const names = JSON.parse(
|
||||
user?.value?.metadata?.annotations?.[rbacAnnotations.ROLE_NAMES] || "[]"
|
||||
);
|
||||
|
||||
return names.map((name: string) => {
|
||||
return roleStore.getRoleDisplayName(name);
|
||||
});
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
|
|
@ -30,6 +30,7 @@ import { useRouteQuery } from "@vueuse/router";
|
|||
import Fuse from "fuse.js";
|
||||
import { usePermission } from "@/utils/permission";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { useRoleStore } from "@/stores/role";
|
||||
|
||||
const { currentUserHasPermission } = usePermission();
|
||||
|
||||
|
@ -55,6 +56,7 @@ const selectedUser = ref<User>();
|
|||
const refreshInterval = ref();
|
||||
|
||||
const userStore = useUserStore();
|
||||
const roleStore = useRoleStore();
|
||||
|
||||
let fuse: Fuse<User> | undefined = undefined;
|
||||
|
||||
|
@ -209,9 +211,13 @@ const handleOpenGrantPermissionModal = (user: User) => {
|
|||
};
|
||||
|
||||
const getRoles = (user: User) => {
|
||||
return JSON.parse(
|
||||
const names = JSON.parse(
|
||||
user.metadata.annotations?.[rbacAnnotations.ROLE_NAMES] || "[]"
|
||||
);
|
||||
|
||||
return names.map((name: string) => {
|
||||
return roleStore.getRoleDisplayName(name);
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
@ -1,18 +1,34 @@
|
|||
import { defineStore } from "pinia";
|
||||
import type { Role, UserPermission } from "@halo-dev/api-client";
|
||||
import { ref } from "vue";
|
||||
import { apiClient } from "@/utils/api-client";
|
||||
import { roleLabels } from "@/constants/labels";
|
||||
import { rbacAnnotations } from "@/constants/annotations";
|
||||
|
||||
interface RoleStoreState {
|
||||
roles: Role[]; // all roles
|
||||
permissions: UserPermission; // current user's permissions
|
||||
}
|
||||
|
||||
export const useRoleStore = defineStore({
|
||||
id: "role",
|
||||
state: (): RoleStoreState => ({
|
||||
export const useRoleStore = defineStore("role", () => {
|
||||
const roles = ref<Role[]>([]);
|
||||
const permissions = ref<UserPermission>({
|
||||
roles: [],
|
||||
permissions: {
|
||||
roles: [],
|
||||
uiPermissions: [],
|
||||
},
|
||||
}),
|
||||
uiPermissions: [],
|
||||
});
|
||||
|
||||
async function fetchRoles() {
|
||||
try {
|
||||
const { data } = await apiClient.extension.role.listv1alpha1Role({
|
||||
page: 0,
|
||||
size: 0,
|
||||
labelSelector: [`!${roleLabels.TEMPLATE}`],
|
||||
});
|
||||
roles.value = data.items;
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch roles", error);
|
||||
}
|
||||
}
|
||||
|
||||
function getRoleDisplayName(name: string) {
|
||||
const role = roles.value.find((role) => role.metadata.name === name);
|
||||
return role?.metadata.annotations?.[rbacAnnotations.DISPLAY_NAME] || name;
|
||||
}
|
||||
|
||||
return { roles, permissions, fetchRoles, getRoleDisplayName };
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue