如何在React中实现IsLoggedIn功能并根据登录状态切换导航栏

你可以通过条件渲染结合isLoggedIn状态来控制导航项的显示，以下是修改后的完整代码：

const history = createHistory();
import { useEffect } from 'react'; // 需要导入useEffect

function App({ calendarStore }) {
  const [isLoggedIn, setIsLoggedIn] = useState(
    !!localStorage.getItem("isLoggedIn")
  );

  // 监听localStorage变化，确保状态同步
  useEffect(() => {
    const syncLoginState = () => {
      setIsLoggedIn(!!localStorage.getItem("isLoggedIn"));
    };
    window.addEventListener('storage', syncLoginState);
    // 组件卸载时移除监听
    return () => window.removeEventListener('storage', syncLoginState);
  }, []);

  return (
    <div>
      <Router history={history}>
        <Navbar bg="primary" expand="lg" variant="dark">
          {/* 登录后仅显示Home */}
          {isLoggedIn && <Navbar.Brand href="/">Home</Navbar.Brand>}
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            {/* 未登录时仅显示Register和Login */}
            {!isLoggedIn && (
              <>
                <Navbar.Brand href="/register">Register</Navbar.Brand>
                <Navbar.Brand href="/login">Login</Navbar.Brand>
              </>
            )}
          </Navbar.Collapse>
        </Navbar>
        <Route
          path="/"
          exact
          component={props => (
            <HomePage {...props} calendarStore={calendarStore} />
          )}
        />
        <Route 
          path='/login'
          exact
          component={login} 
        />
        <Route 
          path='/register'
          exact
          component={register} 
        />
      </Router>
    </div>
  );
}

export default App;

关键说明 #

1. 条件渲染逻辑

   • 使用{isLoggedIn && <元素/>}：当isLoggedIn为true时，渲染Home导航项；
   • 使用{!isLoggedIn && <元素/>}：当未登录时，渲染Register和Login导航项。

2. 状态同步处理

   • 添加useEffect监听浏览器的storage事件，这样如果其他页面修改了localStorage中的登录状态，当前组件的isLoggedIn状态会自动同步，避免状态不一致。

3. 额外提示

   • 确保你的登录组件在登录成功后，执行localStorage.setItem("isLoggedIn", "true")，同时调用setIsLoggedIn(true)；
   • 退出登录时，需要执行localStorage.removeItem("isLoggedIn")并调用setIsLoggedIn(false)，才能正确切换导航显示。

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