在MERN应用中创建管理员用户及路由权限控制咨询

后端实现（权限保护路由） #

1. 编写管理员权限验证中间件 #

创建authAdmin.js中间件，验证请求发起者是否为管理员：

const jwt = require('jsonwebtoken');
const User = require('../models/User'); // 引入你的用户模型

const authAdmin = async (req, res, next) => {
  try {
    // 从请求头获取token（格式为Bearer <token>）
    const token = req.header('Authorization')?.replace('Bearer ', '');
    if (!token) {
      return res.status(401).json({ message: '未登录，无权访问' });
    }

    // 验证并解码token
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    // 查询用户并仅获取isAdmin字段
    const user = await User.findById(decoded.userId).select('isAdmin');
    
    if (!user || !user.isAdmin) {
      return res.status(403).json({ message: '无管理员权限' });
    }

    req.user = user;
    next();
  } catch (err) {
    res.status(401).json({ message: 'token无效或已过期' });
  }
};

module.exports = authAdmin;

2. 用中间件保护管理员专属路由 #

在路由文件中，将authAdmin添加到需要保护的路由前：

const express = require('express');
const router = express.Router();
const authAdmin = require('../middleware/authAdmin');
const adminController = require('../controllers/adminController'); // 你的管理员控制器

// 示例：管理员面板首页
router.get('/admin/dashboard', authAdmin, adminController.getDashboardData);

// 示例：用户管理列表
router.get('/admin/users', authAdmin, adminController.getAllUsers);

module.exports = router;

3. 创建初始管理员用户 #

普通注册默认生成isAdmin: false的用户，可通过以下方式创建第一个管理员：

• 数据库手动修改：直接在MongoDB中找到目标用户，将isAdmin改为true
• 临时脚本创建：编写createAdmin.js脚本执行生成：

const mongoose = require('mongoose');
const User = require('./models/User');
const bcrypt = require('bcryptjs');
require('dotenv').config();

const createAdmin = async () => {
  try {
    await mongoose.connect(process.env.MONGO_URI);
    
    const hashedPassword = await bcrypt.hash('YourSecureAdminPassword', 10);
    const adminUser = new User({
      name: 'Admin',
      email: 'admin@yourdomain.com',
      password: hashedPassword,
      isAdmin: true
    });

    await adminUser.save();
    console.log('管理员用户创建成功');
    process.exit();
  } catch (err) {
    console.error('创建失败:', err);
    process.exit(1);
  }
};

createAdmin();

执行脚本：node createAdmin.js，完成后删除脚本避免安全风险。

前端实现（路由限制与导航控制） #

1. 实现管理员路由守卫 #

基于React Router v6，创建AdminRoute组件包裹管理员专属路由：

import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext'; // 假设用Context管理用户状态

const AdminRoute = () => {
  const { user } = useAuth();

  if (!user) {
    return <Navigate to="/login" replace />;
  }
  if (!user.isAdmin) {
    return <Navigate to="/" replace />;
  }

  return <Outlet />;
};

export default AdminRoute;

在路由配置中使用该组件：

import { Routes, Route } from 'react-router-dom';
import AdminRoute from './components/AdminRoute';
import AdminDashboard from './pages/AdminDashboard';
import UserList from './pages/UserList';
import Home from './pages/Home';
import Login from './pages/Login';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      {/* 管理员专属路由组 */}
      <Route element={<AdminRoute />}>
        <Route path="/admin/dashboard" element={<AdminDashboard />} />
        <Route path="/admin/users" element={<UserList />} />
      </Route>
    </Routes>
  );
}

export default App;

2. 控制导航栏NavLink的显示 #

在导航组件中，根据用户isAdmin状态条件渲染管理员链接：

import { NavLink } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

const Navbar = () => {
  const { user } = useAuth();

  return (
    <nav>
      <NavLink to="/">首页</NavLink>
      {user ? (
        <>
          <NavLink to="/profile">个人中心</NavLink>
          {/* 仅管理员可见 */}
          {user.isAdmin && (
            <NavLink to="/admin/dashboard">管理员面板</NavLink>
          )}
        </>
      ) : (
        <NavLink to="/login">登录</NavLink>
      )}
    </nav>
  );
};

export default Navbar;

3. 确保用户状态包含isAdmin字段 #

登录成功后，将后端返回的用户信息（含isAdmin）存入全局状态：

// 示例：登录函数（Context中实现）
const login = async (email, password) => {
  try {
    const res = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    });
    const data = await res.json();
    // 存入本地存储和全局状态
    localStorage.setItem('user', JSON.stringify(data.user));
    setUser(data.user);
  } catch (err) {
    console.error('登录失败:', err);
  }
};

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