一种方法是使用隐藏它们的css类在导航栏上登录并注销项目：

.hidden{
   display: none;
   visibility: hidden;
}

然后在你的JS身份验证代码中显示相关代码

const signInButton = document.getGelementById('sign-in-button');
const signOutButton = document.getGelementById('sign-out-button');

if(userIsSignedIn()){
    signInButton.classList.add('hidden');
    signOutButton.classList.remove('hidden');
}else{
    signInButton.classList.remove('hidden');
    signOutButton.classList.add('hidden');
}

另一种方法是在导航栏中没有用于登录/注销的项目，然后使用JS添加它们

const navBar = document.getGelementById('nav-bar');

if(userIsSignedIn()){
    addButton('sign-in', 'Sign Out');
    removeButton('sign-out');
}else{
    addButton('sign-out', 'Sign Out');
    removeButton('sign-in');
}
    
function addButton(id, value) {
    var btn = document.createElement('button');
    btn.id = id;
    btn.innerText = value;
    
    if(event.target.id == 'sign-in'){
        btn.addEventListener('click', (event)=>{            
                signIn();
        });
    }else if(event.target.id == 'sign-out'){
        btn.addEventListener('click', (event)=>{            
                signOut();
        });
    }

    navBar.append(btn);
}   


function removeButton(id) {
    var elem = document.getElementById(id);
    if(elem){
        elem.parentNode.removeChild(elem);
    }
}

虽然这可能有点复杂，但没有真正的额外好处。