如何在ReactJS的CoreUI侧边栏菜单中条件渲染导航项

步骤1：创建认证状态上下文 #

先通过React Context管理全局认证状态，新建AuthContext.js：

import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  // 初始化时可从localStorage读取持久化状态
  const [isAuthenticated, setIsAuthenticated] = useState(() => {
    return localStorage.getItem('isAuthenticated') === 'true';
  });

  // 登出操作：清除状态与本地存储
  const logout = () => {
    setIsAuthenticated(false);
    localStorage.removeItem('isAuthenticated');
  };

  // 登录操作：设置状态与本地存储
  const login = () => {
    setIsAuthenticated(true);
    localStorage.setItem('isAuthenticated', 'true');
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

步骤2：将导航配置改为动态生成函数 #

修改_nav.js，把静态数组改为接收认证状态的函数，动态生成登录/登出项：

import { LoginIcon, LogoutIcon } from '@coreui/icons-react';

export const getNavigation = (isAuthenticated, logoutHandler) => [
  // ...其他固定导航项
  {
    component: 'CNavItem',
    name: isAuthenticated ? 'Log Out' : 'Login',
    to: isAuthenticated ? '/' : '/login',
    icon: isAuthenticated ? <LogoutIcon /> : <LoginIcon />,
    onClick: isAuthenticated ? logoutHandler : undefined,
  },
];

步骤3：在侧边栏中注入动态导航 #

修改AppSidebar.js，引入认证上下文，生成适配当前状态的导航：

import { useAuth } from './AuthContext';
import { getNavigation } from '../_nav';

const AppSidebar = () => {
  const { isAuthenticated, logout } = useAuth();
  const navigation = getNavigation(isAuthenticated, logout);

  return (
    <CSidebar>
      <CSidebarNav>
        <SimpleBar>
          <AppSidebarNav items={navigation} />
        </SimpleBar>
      </CSidebarNav>
    </CSidebar>
  );
};

export default AppSidebar;

步骤4：在登录页触发登录状态切换 #

在登录页面（如Login.js），验证成功后调用登录函数：

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

const Login = () => {
  const { login } = useAuth();
  const navigate = useNavigate();

  const handleLogin = async () => {
    // 这里编写账号密码验证逻辑（比如调用后端API）
    // 验证通过后：
    login();
    navigate('/');
  };

  return (
    {/* 登录表单与提交按钮，绑定handleLogin */}
  );
};

收尾：包裹根组件 #

确保应用根组件被AuthProvider包裹（如App.js）：

import { AuthProvider } from './AuthContext';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        {/* 你的路由、侧边栏等应用内容 */}
      </AuthProvider>
    </BrowserRouter>
  );
}

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