MERN应用中如何对非管理员隐藏导航栏的Add New链接

一、权限判断的选择：用Redux的currentUser而非accessToken #

直接用Redux中currentUser的isAdmin字段做判断是最优选择：

• accessToken是加密凭证，前端解析需额外解码逻辑，而currentUser是你已在登录流程中解析并存储到Redux的用户数据，直接使用更高效。
• currentUser包含明确的isAdmin字段，语义清晰，适配UI层面的权限控制。
• 注意：前端UI隐藏仅为体验优化，后端必须做权限校验，防止用户直接访问管理员路由或提交敏感请求。

二、具体实现步骤 #

在你的Navbar组件中，给Add New导航项添加条件渲染逻辑：仅当用户已登录（currentUser存在）且为管理员（currentUser.isAdmin为true）时，才渲染该链接。

修改后的核心代码片段：

// 替换原有的Add New导航项
{currentUser?.isAdmin && (
  <Nav_Item>
    <Nav_Links to="/add-new" onClick={closeMobileMenu}>
      Add New
    </Nav_Links>
  </Nav_Item>
)}

完整的导航项部分代码：

<Nav_Item>
  {currentUser ? (
    <Nav_Links to={"/"} onClick={handleLogout}>
      Logout
    </Nav_Links>
  ) : (
    <Nav_Links to="/login" onClick={closeMobileMenu}>
      Login
    </Nav_Links>
  )}
</Nav_Item>
// 条件渲染管理员专属链接
{currentUser?.isAdmin && (
  <Nav_Item>
    <Nav_Links to="/add-new" onClick={closeMobileMenu}>
      Add New
    </Nav_Links>
  </Nav_Item>
)}
<ToggleSwitch />

三、后端安全校验（必须） #

前端隐藏链接后，需在后端补充权限校验：

1. 给/add-new页面路由添加管理员校验中间件，非管理员请求返回403或重定向。
2. 给添加内容的API接口添加同样的权限校验，拒绝非管理员的操作请求。

Node.js/Express后端示例：

const jwt = require('jsonwebtoken');

// 管理员权限校验中间件
const requireAdmin = (req, res, next) => {
  const token = req.cookies.accessToken;
  if (!token) return res.status(401).json("未登录");
  
  jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
    if (err) return res.status(403).json("无效凭证");
    if (!user.isAdmin) return res.status(403).json("无管理员权限");
    req.user = user;
    next();
  });
};

// 给路由应用校验
router.get('/add-new', requireAdmin, (req, res) => {
  // 返回管理员页面逻辑
});

router.post('/api/add-item', requireAdmin, (req, res) => {
  // 处理添加数据逻辑
});

内容的提问来源于stack exchange，提问作者smit agravat