React-Firebase单页应用：登出后按钮未切换为登录按钮问题

问题描述 #

首次登录功能正常，但执行登出操作并刷新页面后，导航栏仅移除了用户名和头像，登出按钮仍未切换为登录按钮。

登出前页面截图：

登出后刷新页面截图：

问题原因 #

1. 登录状态判断逻辑错误：原代码用localStorage.getItem("name") === ""判断未登录，但登出后localStorage.getItem("name")返回的是null而非空字符串，导致条件不成立，仍显示登出相关内容。
2. localStorage清理方式错误：localStorage.clear(auth)写法无效，clear()方法不需要参数，且原代码未正确移除登录相关的存储项。

修改后的代码 #

import { NavLink } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { auth, signInWithGoogle } from '../Firebase';

const Navbar = () => {
    const state = useSelector((state) => state.addItem);

    const logOut = async () => {
        await auth.signOut();
        console.log("signed out.");
        // 针对性移除登录相关存储项，也可使用localStorage.clear()清空全部
        localStorage.removeItem("name");
        localStorage.removeItem("profilePic");
    }

    // 修正登录状态判断：检查name是否存在且非空
    const isLoggedIn = localStorage.getItem("name") !== null && localStorage.getItem("name") !== "";

    return (
        <div>
            <nav className="navbar navbar-expand-lg navbar-light bg-light py-3 shadow-sm">
                <div className="container">
                    <NavLink className="navbar-brand fw-bold fs-4" to="/">DUST</NavLink>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav mx-auto mb-2 mb-lg-0">
                            <li className="nav-item">
                                <NavLink className="nav-link active" aria-current="page" to="/">HOME</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink className="nav-link" to="/products">PRODUCTS</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink className="nav-link" to="/about">ABOUT</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink className="nav-link" to="/contact">CONTACT</NavLink>
                            </li>
                        </ul>
                        <div className="buttons">
                            {!isLoggedIn ? (
                                <button className="btn btn-outline-dark ms-3" onClick={signInWithGoogle}>
                                    <i className='fa fa-sign-in me-1'></i> LOGIN
                                </button>
                            ) : (
                                <>
                                    <div className='d-flex align-items-center'>
                                        <NavLink to="/cart" className="btn btn-outline-dark ms-2 me-3">
                                            <i className='fa fa-shopping-cart me-1'></i>
                                            {state?.length}
                                        </NavLink>
                                        <h4 className="lead mb-0 me-2">{localStorage.getItem("name")}</h4>
                                        <img src={localStorage.getItem("profilePic")} alt="Profile" className='img-fluid rounded-circle me-3' style={{ height:50, width:50 }} />
                                        <button className="btn btn-outline-dark" onClick={logOut}>
                                            <i className='fa fa-sign-out me-1'></i> LOGOUT 
                                        </button>
                                    </div>
                                </>
                            )}
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    );
}

export default Navbar;

关键修改点 #

• 修复登录状态判断：改用localStorage.getItem("name") !== null && localStorage.getItem("name") !== ""，覆盖null和空字符串两种未登录场景。
• 修正localStorage清理：使用localStorage.removeItem精准移除name和profilePic，避免误删其他存储内容；若需要清空全部，可替换为localStorage.clear()。
• 优化布局：将登录状态下的容器改为d-flex align-items-center，让元素垂直居中，提升视觉效果。

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