在基于角色的访问控制系统中，我们如何管理身份验证和角色状态？前端的路由如何反应？

Question

我已经理解了。这就是RBAC在Mern中实施的方式。

• 在创建用户时，添加角色字段。

将角色字段与JWT Token一起作为响应。

• 存储在本地存储中，并在响应中使用角色来保护 前端的路线反应。

• 在后端制造jwt代币身份验证状态的中间件 验证和检查角色的中间件。

• 对您的后端路线上的这些中间件进行更大 保护

但是，我们如何保护前端路线，以及前端如何知道登录哪个角色？

• 
  您在正确的轨道上，您可以理解MERN Stack应用程序中实现基于角色的访问控制（RBAC）的理解。为了保护前端路线并管理用户角色，您可以按照以下步骤操作：

当用户登录时，存储JWT令牌并在本地存储中角色。

localStorage.setItem('token', data.token);
localStorage.setItem('role', data.role); 

Answer 1

创建了一个高阶组件，该组件在渲染受保护的途径之前检查身份验证和角色。

    import { Navigate } from 'react-router-dom';
    
    const PrivateRoute = ({ children, roles }) => {
        const token = localStorage.getItem('token');
        const userRole = localStorage.getItem('role');
    
        if (!token) {
            // If no token, redirect to login
            return <Navigate to="/login" />;
        }
    
        if (roles && !roles.includes(userRole)) {
            // If user role is not authorized, redirect to unauthorized page
            return <Navigate to="/unauthorized" />;
        }
    
        // If authenticated and role is authorized, render the component
        return children;
    };
    
    export default PrivateRoute;

使用创建的组件包装受保护的路由并检查特定的角色。

    import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
    import PrivateRoute from './components/PrivateRoute';
    import AdminPage from './pages/AdminPage';
    import UserPage from './pages/UserPage';
    import LoginPage from './pages/LoginPage';
    import UnauthorizedPage from './pages/UnauthorizedPage';
    
    function App() {
        return (
            <Router>
                <Routes>
                    <Route path="/login" element={<LoginPage />} />
                    <Route path="/unauthorized" element={<UnauthorizedPage />} />
                    
                    {/* Protected Routes */}
                    <Route path="/admin" element={
                        <PrivateRoute roles={['admin']}>
                            <AdminPage />
                        </PrivateRoute>
                    } />
                    <Route path="/user" element={
                        <PrivateRoute roles={['user', 'admin']}>
                            <UserPage />
                        </PrivateRoute>
                    } />
                </Routes>
            </Router>
        );
    }
    
    export default App;