不使用Redux如何根据登录状态动态控制退出按钮显示且无需刷新页面

问题根因 #

• localStorage 本身不属于React的响应式数据源，它的内容变更不会触发组件重渲染。登录操作在其他组件完成时，NavBar组件没有感知到localStorage的更新，所以只有页面刷新、组件重新挂载时才会读取最新的token更新状态。
• 你当前写的useEffect没有传入依赖数组，会导致每次组件重渲染都重复执行读取localStorage、setState的逻辑，造成不必要的性能开销。

无需Redux的实现方案 #

方案1：使用React Context共享登录状态（最推荐） #

把登录状态提升到全局公共父组件（比如App.jsx），用Context封装状态和更新方法，所有需要用到登录状态的组件都可以消费这个Context，登录成功后直接更新Context的状态即可全局同步：

1. 先创建AuthContext.js

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

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [loggedInUser, setLoggedInUser] = useState(null);

  // 组件初始化时从localStorage读取登录状态
  useEffect(() => {
    const token = localStorage.getItem('loginToken');
    setLoggedInUser(token);
  }, []);

  // 登录成功后调用这个方法更新状态
  const login = (token) => {
    localStorage.setItem('loginToken', token);
    setLoggedInUser(token);
  };

  // 退出登录方法也可以抽到这里统一管理
  const logout = () => {
    localStorage.clear();
    setLoggedInUser(null);
  };

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

// 自定义hooks简化消费
export const useAuth = () => useContext(AuthContext);

2. 入口文件包裹App组件

import { AuthProvider } from './AuthContext';

ReactDOM.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
  document.getElementById('root')
);

3. 修改你的NavBar组件

import { Navbar, Nav, Container, Button } from 'react-bootstrap';
import axios from 'axios';
import { useHistory } from 'react-router-dom';
import { useAuth } from './AuthContext';

const NavBar = () => {
  let history = useHistory();
  const { loggedInUser, logout } = useAuth();

  const handleLogout = (e) => {
    e.preventDefault();
    const headers = {
      "Accept" : "application/json",
      "Authorization" : `Bearer ${localStorage.getItem('loginToken')}`
    };

    axios.post('http://website.test/api/logout', null, {headers})
      .then(res => {
        if(res.status === 200) {
          logout(); // 调用Context的logout方法更新全局状态
          return history.push('/');
        }
      }).catch(err => {
        console.log(err);
      });
  };

  return (
    <Navbar bg="dark" variant="dark">
      <Container>
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        { loggedInUser && <Nav className="me-auto"><Button onClick={handleLogout}>Logout</Button></Nav> }
      </Container>
    </Navbar>
  );
}

export default NavBar;

4. 登录成功的组件里调用login方法即可同步更新导航栏状态：

// 登录接口请求成功后
const { login } = useAuth();
login(res.data.token); // 传入拿到的token，导航栏会自动显示退出按钮

方案2：自定义事件通信（轻量场景可用） #

如果不想引入Context，也可以用浏览器的自定义事件实现跨组件通信：

1. 登录成功的地方派发事件：

// 登录成功存完token后
window.dispatchEvent(new CustomEvent('authChange'));

2. NavBar组件监听这个事件：

useEffect(() => {
  // 初始化读取
  const getToken = () => setLoggedInUser(localStorage.getItem("loginToken"));
  getToken();
  // 监听登录状态变更事件
  window.addEventListener('authChange', getToken);
  // 组件卸载时移除监听
  return () => window.removeEventListener('authChange', getToken);
}, []);

代码优化建议 #

• 给useEffect补充依赖数组，避免无意义的重复执行
• 退出登录的逻辑可以封装成公共方法，避免重复编写
• axios请求可以统一封装实例，不用每次都手动写headers
• 判断条件可以把loggedInUser ? xxx : null简化为loggedInUser && xxx，可读性更高

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