导航栏登录/注销按钮与JavaScript冲突问题求助

问题描述 #

在index.html中实现了基于JWT Token的登录状态检测与注销功能：未登录时显示登录入口，登录后显示注销按钮，点击可清除localStorage中的JWT Token并跳转至登录页，该功能在首页静态结构下正常运行。但将该功能模块移至通过jQuery load方法动态加载的导航栏（个人图标位置）后完全失效，原因是注销脚本在导航栏加载完成前已执行，无法找到目标DOM元素。

解决方案 #

核心思路 #

利用jQuery load方法的回调函数，确保导航栏动态加载完成后，再执行登录状态检测与UI更新逻辑；同时调整导航栏内的元素结构，将登录/注销相关元素整合到导航栏模板中。

步骤1：修改导航栏模板（navbar.html） #

将原有的个人图标链接替换为包含登录状态切换的容器：

<!-- 替换navbar.html中对应位置的<li>项 -->
<li class="nav-item me-3" id="authContainer">
  <a href="login.html" class="navbar-link" id="loginLink">
    <i class="bi bi-person-fill"></i>
  </a>
  <div id="logoutContainer" style="display: none;">
    <button type="button" class="btn btn-light btn-sm" onclick="logout()">Logout</button>
  </div>
</li>

步骤2：修改导航栏加载代码（main.js或对应脚本） #

在load方法中添加回调函数，导航栏加载完成后立即执行UI更新：

$("#navbar").load("../Frontend/navbar.html .navbar", function() {
  // 导航栏加载完成后触发登录状态检测
  updateUI();
});

步骤3：优化登录状态管理脚本（logout-login.js） #

移除重复定义的logout函数，并调整updateUI函数以适配导航栏内的元素：

// 从localStorage获取JWT Token
function getToken() {
  return localStorage.getItem("jwtToken");
}

// 判断用户是否已登录
function isLoggedIn() {
  const token = localStorage.getItem("jwtToken");
  return !!token; // 存在Token则返回true，否则false
}

// 根据登录状态更新UI
function updateUI() {
  const authContainer = document.getElementById("authContainer");
  const loginLink = document.getElementById("loginLink");
  const logoutContainer = document.getElementById("logoutContainer");

  if (!authContainer || !loginLink || !logoutContainer) return; // 防止元素未加载时出错

  if (isLoggedIn()) {
    // 登录状态：隐藏登录链接，显示注销按钮
    loginLink.style.display = "none";
    logoutContainer.style.display = "block";
  } else {
    // 未登录：显示登录链接，隐藏注销按钮
    loginLink.style.display = "block";
    logoutContainer.style.display = "none";
  }
}

// 注销功能：清除Token并跳转至登录页
function logout() {
  localStorage.removeItem("jwtToken");
  window.location.href = '/Frontend/login.html';
}

步骤4：移除index.html中原有静态登录状态元素 #

删除首页中原来的<p id="loggedInMessage">和<div id="logoutContainer">，因为相关功能已移至导航栏。

说明 #

jQuery的load方法是异步执行的，原代码中DOMContentLoaded事件触发时，导航栏尚未加载完成，导致updateUI函数无法找到目标元素。通过将updateUI放入load的回调函数中，确保只有当导航栏DOM完全加载后，才执行状态检测与UI更新，从根本上解决了加载顺序冲突的问题。

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