如何在同一React应用中区分管理员与客户端用户并展示对应界面

后端实现：身份标识与权限校验 #

• 在MongoDB用户集合中添加role字段，存储用户身份（例如"admin"或"client"），从数据层面区分角色。
• 登录接口返回包含角色信息的JWT令牌，令牌内嵌用户ID和角色，示例代码：

const jwt = require('jsonwebtoken');
const User = require('../models/User');

// 登录接口
app.post('/api/auth/login', async (req, res) => {
  const { email, password } = req.body;
  const user = await User.findOne({ email });
  
  if (!user || !(await user.matchPassword(password))) {
    return res.status(401).json({ message: '账号或密码错误' });
  }

  // 生成包含角色的JWT
  const token = jwt.sign(
    { id: user._id, role: user.role },
    process.env.JWT_SECRET,
    { expiresIn: '7d' }
  );

  res.json({ token, user: { id: user._id, name: user.name, role: user.role } });
});

• 编写双重中间件：先验证JWT有效性，再校验用户角色，保护管理员专属接口：

// JWT验证中间件
const authMiddleware = (req, res, next) => {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) return res.status(401).json({ message: '未授权访问' });

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (err) {
    res.status(401).json({ message: '令牌无效' });
  }
};

// 管理员权限校验中间件
const adminGuard = (req, res, next) => {
  if (req.user.role !== 'admin') {
    return res.status(403).json({ message: '无权限访问此资源' });
  }
  next();
};

// 管理员接口示例
app.get('/api/admin/data', authMiddleware, adminGuard, async (req, res) => {
  const data = await /* 管理员专属数据查询逻辑 */;
  res.json(data);
});

前端实现：路由控制与自动跳转 #

• 使用react-router-dom实现路由守卫，根据用户角色拦截路由并自动跳转：
• 首先通过React Context或Redux维护全局用户状态，登录后将角色信息存入状态及本地存储（用于页面刷新恢复）：

// 登录逻辑示例
const handleLogin = async (email, password) => {
  const res = await fetch('/api/auth/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password })
  });
  const data = await res.json();

  if (res.ok) {
    // 更新全局状态
    authContext.setUser(data.user);
    // 存入本地存储
    localStorage.setItem('user', JSON.stringify(data.user));
    localStorage.setItem('token', data.token);
  }
};

• 编写路由守卫组件：

import { Navigate, Outlet } from 'react-router-dom';
import { useAuthContext } from '../contexts/AuthContext';

// 管理员路由守卫
export const AdminRoute = () => {
  const { user } = useAuthContext();
  if (!user) return <Navigate to="/login" replace />;
  return user.role === 'admin' ? <Outlet /> : <Navigate to="/client" replace />;
};

// 客户端路由守卫
export const ClientRoute = () => {
  const { user } = useAuthContext();
  if (!user) return <Navigate to="/login" replace />;
  return user.role === 'client' ? <Outlet /> : <Navigate to="/admin" replace />;
};

• 配置应用路由，默认路由根据用户角色自动跳转：

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { AdminRoute, ClientRoute } from './components/RouteGuards';
import Login from './pages/Login';
import AdminDashboard from './pages/admin/AdminDashboard';
import ClientHome from './pages/client/ClientHome';
import { useAuthContext } from './contexts/AuthContext';

function App() {
  const { user } = useAuthContext();
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        {/* 管理员专属路由组 */}
        <Route element={<AdminRoute />}>
          <Route path="/admin/*" element={<AdminDashboard />} />
        </Route>
        {/* 客户端专属路由组 */}
        <Route element={<ClientRoute />}>
          <Route path="/client/*" element={<ClientHome />} />
        </Route>
        {/* 根路径自动跳转 */}
        <Route 
          path="/" 
          element={<Navigate to={user?.role === 'admin' ? '/admin' : '/client'} replace />} 
        />
      </Routes>
    </Router>
  );
}

• 页面刷新时恢复用户状态：

// 在AuthContext初始化时添加
useEffect(() => {
  const storedUser = localStorage.getItem('user');
  if (storedUser) {
    setUser(JSON.parse(storedUser));
  }
}, []);

安全加固措施 #

• 组件层面做二次校验：管理员面板的组件仅在用户角色为admin时渲染，防止路由绕过。
• 生产环境将JWT存入HttpOnly、Secure属性的Cookie中，避免XSS攻击窃取令牌：

// 后端设置Cookie示例
res.cookie('token', token, {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production',
  maxAge: 7 * 24 * 60 * 60 * 1000
});

• 禁用客户端直接访问管理员接口：后端所有管理员接口必须经过authMiddleware和adminGuard双重校验。

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