React中localStorage.removeItem删token后登出未跳转问题排查

你遇到的登出失效问题是两个代码bug共同导致的：

• 第一个是JSX事件绑定语法错误：你写的Logout按钮用了全小写的onclick事件属性，这是原生HTML的事件写法，React JSX只识别驼峰命名的onClick属性，小写写法不会绑定你写的logOut函数，正常点击按钮根本不会执行登出逻辑。你测试时看到token被删除，大概率是手动触发函数、热更新等特殊场景下的偶发结果，普通用户点击按钮根本触发不了删除token的操作，这也是你手动刷新页面还停在受保护页的核心原因——token根本没被删掉。
• 第二个是登出逻辑缺失触发动作：就算logOut函数成功执行删除了localStorage里的token，页面也不会自动跳转。因为localStorage本身不是响应式数据源，React不会监听它的内容变化自动重渲染组件。你的RequireAuth路由守卫只有在组件重新渲染时才会读取最新的token值，删除token的操作既没有触发组件重渲染，也没有主动调用路由跳转，路由层完全感知不到登录状态已经变化，自然不会执行跳转到登录页的逻辑。

只需要修改两处代码即可解决问题：

1. 修正NavigationBar组件里的Logout按钮事件绑定，把小写onclick改为驼峰onClick
2. 在logOut函数里，删除token之后主动调用路由方法跳转到登录页

修改后的相关代码如下：

const NavigationBar = () => {
    const navigate = useNavigate();
    // ...保留原有其他业务逻辑
    const logOut = () => {
        localStorage.removeItem('token');
        // 删除token后主动跳转登录页，replace参数避免用户点浏览器回退回到受保护页
        navigate("/", { replace: true });
    }
    
    return (
        // ...保留原有其他JSX结构
        <LogOutButton onClick={logOut}>Logout</LogOutButton>
        // ...保留剩余页面结构
    )
}

改完之后点击Logout按钮，会先清除本地存储的token，再直接跳转到登录页；后续如果用户手动输入受保护路由地址，RequireAuth重新渲染时读取不到token，也会自动拦截跳转到登录页，完全符合鉴权逻辑预期。

如果后续想优化鉴权逻辑，可以把登录token存在React Context或者Redux这类全局状态管理里，让token变化可以自动触发所有依赖鉴权状态的组件重渲染，不用每次手动触发跳转，不过针对你当前的项目代码，上面的修改已经可以完全解决登出失效的问题。

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