更新路由守卫
Change-Id: Iddd1d006202a03e8a97e3a90d64d9a43c5d2cb78
diff --git a/Merge/front/src/components/UserManagement.js b/Merge/front/src/components/UserManagement.js
index a48f8cf..bed6b8f 100644
--- a/Merge/front/src/components/UserManagement.js
+++ b/Merge/front/src/components/UserManagement.js
@@ -1,51 +1,77 @@
-import React, { useState, useEffect } from 'react';
-import '../style/Admin.css';
-import { Select, message, Table } from 'antd';
-import { fetchUserList, giveUser, giveAdmin, giveSuperAdmin } from '../api/posts_trm';
+// src/components/UserManagement.jsx
-const { Option } = Select;
-const ROLE_LIST = ['用户', '管理员', '超级管理员'];
+import React, { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { Table, Select, message } from 'antd'
+import {
+ fetchUserList,
+ giveUser,
+ giveAdmin,
+ giveSuperAdmin
+} from '../api/posts_trm'
+import '../style/Admin.css'
-function UserManagement({ superAdminId }) {
- const [users, setUsers] = useState([]);
+const { Option } = Select
+const ROLE_LIST = ['用户', '管理员', '超级管理员']
+
+export default function UserManagement() {
+ // 直接从 URL 参数里拿到 superAdminId
+ const { userId: superAdminId } = useParams()
+
+ const [users, setUsers] = useState([])
useEffect(() => {
async function load() {
try {
- const data = superAdminId
- ? await fetchUserList(superAdminId)
- : await fetch('/api/users').then(res => res.json());
- setUsers(data);
+ // 调用接口获取用户列表
+ const data = await fetchUserList(superAdminId)
+ setUsers(data)
} catch (e) {
- console.error(e);
+ console.error(e)
+ message.error('获取用户列表失败：' + e.message)
}
}
- load();
- }, [superAdminId]);
- // handle role changes
+ // 只有当 superAdminId 有值时才发请求
+ if (superAdminId) {
+ load()
+ }
+ }, [superAdminId])
+
+ // 处理角色变更
const handleRoleChange = async (userId, newRole) => {
try {
- if (newRole === '用户') await giveUser(superAdminId, userId);
- else if (newRole === '管理员') await giveAdmin(superAdminId, userId);
- else if (newRole === '超级管理员') await giveSuperAdmin(superAdminId, userId);
- setUsers(us => us.map(u => u.id === userId ? { ...u, role: newRole } : u));
- message.success('修改成功');
+ if (newRole === '用户') {
+ await giveUser(superAdminId, userId)
+ } else if (newRole === '管理员') {
+ await giveAdmin(superAdminId, userId)
+ } else if (newRole === '超级管理员') {
+ await giveSuperAdmin(superAdminId, userId)
+ }
+ // 本地更新状态
+ setUsers(us =>
+ us.map(u => (u.id === userId ? { ...u, role: newRole } : u))
+ )
+ message.success('修改成功')
} catch (e) {
- console.error(e);
- message.error('修改失败');
+ console.error(e)
+ message.error('修改失败：' + e.message)
}
- };
+ }
- // define table columns
+ // 表格列定义
const columns = [
{ title: '用户名', dataIndex: 'username', key: 'username' },
- { title: '角色', dataIndex: 'role', key: 'role' },
+ { title: '角色', dataIndex: 'role', key: 'role' },
{
title: '操作',
key: 'action',
render: (_, record) => {
- const orderedRoles = [record.role, ...ROLE_LIST.filter(r => r !== record.role)];
+ // 当前角色排第一
+ const orderedRoles = [
+ record.role,
+ ...ROLE_LIST.filter(r => r !== record.role)
+ ]
return (
<Select
value={record.role}
@@ -53,13 +79,15 @@
onChange={value => handleRoleChange(record.id, value)}
>
{orderedRoles.map(r => (
- <Option key={r} value={r}>{r}</Option>
+ <Option key={r} value={r}>
+ {r}
+ </Option>
))}
</Select>
- );
- },
- },
- ];
+ )
+ }
+ }
+ ]
return (
<div className="admin-container">
@@ -70,7 +98,5 @@
pagination={false}
/>
</div>
- );
+ )
}
-
-export default UserManagement;