Django登录认证系统导致JavaScript失效问题求助

问题根源分析 #

你的问题大概率是登出后页面缺少JS依赖的DOM元素，导致抛出错误中断整个脚本执行。看你提供的代码里，selectElement函数找不到元素时会直接抛出Error，一旦某个仅在登录状态下存在的元素（比如主题切换按钮）在登出页面不存在，整个JS就会停止运行，后续的菜单切换、轮播等功能也会失效。

同时需要排查：

• 登出页面是否正确加载了JS文件（比如模板继承时是否遗漏了JS引入的block）
• Cookie设置是否在登出后依然有效（你的Cookie设置逻辑本身没问题，核心还是JS中断的问题）

具体解决方案 #

1. 修复selectElement的错误处理逻辑 #

不要直接抛出错误，改为找不到元素时返回null，避免中断整个脚本：

const selectElement = (selector) => {
    return document.querySelector(selector);
};

或者保留提示但不终止脚本：

const selectElement = (selector) => {
    const element = document.querySelector(selector);
    if(!element) {
        console.warn(`元素 ${selector} 不存在，跳过相关逻辑`);
    }
    return element;
};

2. 给所有DOM操作加存在性判断 #

比如主题切换、菜单切换的逻辑，都先检查元素是否存在再执行：

// 主题切换逻辑
const themeToggleBtn = selectElement('#theme-toggle-btn');
if(themeToggleBtn) {
    const body = document.body;
    const currentTheme = getCookie('currentTheme');

    if (currentTheme) {
        body.classList.add('light-theme');
    }

    themeToggleBtn.addEventListener('click', function () {
        body.classList.toggle('light-theme');
        if (body.classList.contains('light-theme')) {
            setCookie('currentTheme', 'themeActive', 365);
        } else {
            setCookie('currentTheme', '', -1);
        }
    });
}

3. 检查登出页面的模板结构 #

确认登出状态下，页面是否包含JS中引用的所有元素：

• 如果某些元素（比如主题切换按钮）只在登录后显示，要在模板中通过{% if user.is_authenticated %}控制渲染
• 确保登出页面继承了包含JS引入的base模板，比如在base.html中用{% block js %}引入JS，登出页面的模板要保留这个block

4. 优化Cookie设置（可选） #

给Cookie添加SameSite属性，提升兼容性和安全性：

function setCookie(name, value, days) {
    let expires = '';
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = `${name}=${value || ""}${expires}; path=/; SameSite=Lax`;
}

调试技巧 #

打开浏览器开发者工具（F12），切换到Console标签页，查看登出后是否有红色错误提示，这是定位问题最快的方式。如果看到类似"Something went wrong! Make sure that #theme-toggle-btn exists..."的错误，就说明是元素不存在导致的脚本中断。

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