我如何使我的管理页面(从数据库中删除用户)不显示在列表中的其他用户，如果他们有一个管理员角色?

Question

我正在制作一个管理页面，列出我的web应用程序数据库中的所有当前用户。我试图使它，使用户与角色管理员，不出现在列表中，基本上防止管理员从删除其他管理员。我怎样才能做到这一点呢?这是我的代码:

BoardAdmin.jsx:

import React, {useState, useEffect} from 'react';
import UserService from '../../services/user.service';
import './styles/BoardAdmin.css';
const BoardAdmin = () => {
const [content, setContent] = useState('');
const [users, setUsers] = useState([]);
useEffect(() => {
UserService.getAdminBoard().then(
(response) => {
setUsers(response.data);
// console.log(response.data);
},
(error) => {
const _content =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
setContent(_content);
}
);
}, []);
return (
<div className='page'>
<header className='jumbotron'>
<div className='column-names'>
<p className='user-id-column'>User ID</p>
<p className='username-column'>Username</p>
{/* <p>User Role</p> */}
<p className='user-email-column'>Email</p>
</div>
{users.map((user) => (
<ul className='user-list'>
<li class='user'>
<div>
<div class='info'>
<span class='user-id'>{user.id}</span>
<span class='name'>{user.username}</span>
<span class='role'>{user.role}</span>
<span class='email'>{user.email}</span>
<img class='remove' src='https://i.imgur.com/CemzWSg.png' />
</div>
</div>
<div class='expand'></div>
</li>
</ul>
))}
</header>
</div>
);
};
export default BoardAdmin;

如果我用我的const { user: currentUser } = useSelector((state) => state.auth);和if (currentUser) { setShowAdminBoard(currentUser.roles.includes("ROLE_ADMIN"));的认证文件检查状态，我可以访问用户角色。谁能告诉我怎么才能完成这个?它需要在后端完成吗?任何帮助都将是感激的，如果有必要，我会包括更多的代码。

Answer 1

在JSX中呈现具有该角色的用户时，您需要过滤掉这些用户。

// Assuming that "ROLE_ADMIN" is the unwanted role
{users.filter(user => user.role !== "ROLE_ADMIN").map((user) => (
<ul className='user-list'>
<li class='user'>
...

安全注意:建议在应用程序的后端处理这个问题，因为在客户端执行的任何操作都可以被操纵。