如何实现仅未登录时显示登录/注册按钮？问题排查

问题背景 #

需要实现：用户登录后隐藏「登录」「注册」按钮，仅在未登录状态下显示。但现有JavaScript代码未生效，且后端Flask为调试需求，无论用户是否登录都传递loggedin=True。

前端JavaScript代码问题分析 #

原JS代码存在3个关键问题：

1. JavaScript的布尔值是小写false，不是Python风格的False，直接写False会被识别为未定义变量
2. 显示和隐藏使用了不同CSS属性：显示用display: inline-block，隐藏用visibility: hidden，两者行为不一致（visibility:hidden元素仍占页面空间）
3. 未正确从Flask模板注入loggedin变量，导致JS中loggedin未定义

修复后的前端代码：

// 先确保从Flask模板正确注入登录状态
var loggedin = {{ loggedin|tojson }};
var loginBtn = document.getElementById("LoginBtn");
var registerBtn = document.getElementById("RegisterBtn");

if (!loggedin) {
    loginBtn.style.display = "inline-block";
    registerBtn.style.display = "inline-block";
} else {
    loginBtn.style.display = "none";
    registerBtn.style.display = "none";
}

后端Flask代码问题分析 #

当前后端代码无论用户是否登录都返回loggedin=True，导致永远不会触发按钮显示逻辑。需要修正分支逻辑：

修复后的后端代码：

@app.route('/')
def index():
    if flask.session.get('username'):
        return flask.render_template('index.html', loggedin=True)
    else:
        return flask.render_template('index.html', loggedin=False)

额外优化建议 #

如果使用模板引擎，可以直接在HTML中通过条件渲染控制按钮显示，无需JS：

{% if not loggedin %}
    <button id="LoginBtn">登录</button>
    <button id="RegisterBtn">注册</button>
{% endif %}

这种方式更简洁，还能避免JS加载延迟导致的按钮闪烁问题。

内容的提问来源于stack exchange，提问作者Jorge Rodriguez Anton