为什么localStorage修改后需刷新才生效？如何实时更新登录按钮状态？

• React 组件仅在自身state或props发生变更时才会触发重新渲染。你的App组件只在初始化（constructor）和挂载完成（componentDidMount）时读取了一次localStorage，后续localStorage的内容更新不会自动同步到App的state里，自然不会触发导航栏的重新渲染。
• 你使用的是React Router的客户端跳转<Redirect>，属于单页应用内的路由切换，不会触发整页重载，所以App组件不会重新执行初始化逻辑读取最新的localStorage值，只有手动刷新页面时才会重新走初始化逻辑拿到最新的登录状态。

方案1：监听自定义事件（改造成本最低，适合当前场景） #

单页应用内同页面修改localStorage默认不会触发原生storage事件，我们可以通过自定义事件主动通知App更新状态：

1. 先修改登录组件的登录成功逻辑，设置完localStorage后触发自定义事件：

if (res === "Successfully authenticated user") {
    localStorage.setItem('loggedIn', "true")
    localStorage.setItem('isloggingIn', "false")
    localStorage.setItem('username', this.userdata.username)
    // 新增：触发登录状态变更事件
    window.dispatchEvent(new Event('loginStateChanged'))
}

2. 再修改App组件，监听该自定义事件主动更新state：

constructor(){
    this.state = {
        isLoggingIn: localStorage.getItem('isloggingIn'), 
        isLoggedIn: localStorage.getItem('loggedIn')
    }
}
componentDidMount() {
    // 原有逻辑保留
    this.setState({
        isLoggingIn: localStorage.getItem('isloggingIn'), 
        isLoggedIn: localStorage.getItem('loggedIn') 
    });
    // 新增：监听登录状态变更事件
    const updateLoginState = () => {
        this.setState({
            isLoggingIn: localStorage.getItem('isloggingIn'), 
            isLoggedIn: localStorage.getItem('loggedIn') 
        })
    }
    window.addEventListener('loginStateChanged', updateLoginState)
    this.updateLoginState = updateLoginState
}
// 新增：组件卸载时移除监听，避免内存泄漏
componentWillUnmount() {
    window.removeEventListener('loginStateChanged', this.updateLoginState)
}

方案2：全局状态管理（适合项目迭代扩展） #

如果项目后续复杂度会提升，也可以直接用React Context、Redux等全局状态管理方案统一维护登录状态，避免跨组件通信的问题。

• localStorage存储的所有值都是字符串类型，不要用isLoggedIn === true这类布尔值判断，当前你用字符串全等判断的逻辑是正确的，不要混淆类型。
• 敏感的认证凭证不建议存放在localStorage中，存在XSS被盗取的风险，有条件可以改用HttpOnly Cookie存储认证信息。

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