Flask点击登录按钮时flash消息不显示问题求解

问题成因 #

• Flash是Flask的会话级消息机制，默认仅在服务端触发页面跳转/刷新时才会被模板中的渲染逻辑读取展示。你通过JS异步调用check_login接口时，页面不会重新渲染，base.html中写的Flash遍历渲染代码不会执行，生成的消息会暂存在session中无法即时展示，只会在下次页面刷新时意外弹出。
• 若base.html没有编写全局Flash渲染逻辑，仅在登录、注册等特定页面写了渲染代码，就算触发页面刷新也可能看不到对应消息。
• check_login接口未把Flash消息序列化到响应体中，前端JS拿到响应后没有可插入页面的消息内容。

可行修复方案 #

1. 调整check_login接口返回逻辑 #

修改routes.py中的接口，异步请求场景下直接把消息内容放到JSON响应中：

from flask import jsonify, session
# 若用Flask-Login可以导入current_user判断登录状态

@app.route('/check_login')
def check_login():
    if 'user_id' in session: # 用Flask-Login则替换为current_user.is_authenticated
        return jsonify({
            "code": 1,
            "msg": "用户已登录",
            "msg_type": "error"
        })
    return jsonify({"code": 0, "msg": "未登录"})

2. 前端JS新增动态消息插入逻辑 #

修改登录按钮的点击事件代码，拿到接口响应后动态把消息插入到页面中：

document.querySelector('#login-btn').addEventListener('click', async () => {
  const res = await fetch('/check_login').then(r => r.json())
  if (res.code === 1) {
    // 初始化全局消息容器，不存在就动态创建
    let flashContainer = document.querySelector('.flash-container')
    if (!flashContainer) {
      flashContainer = document.createElement('div')
      flashContainer.className = 'flash-container position-fixed top-0 end-0 p-3 z-3'
      document.body.appendChild(flashContainer)
    }
    // 插入Bootstrap风格提示框
    const alertEl = document.createElement('div')
    alertEl.className = `alert alert-${res.msg_type === 'error' ? 'danger' : 'success'} alert-dismissible fade show`
    alertEl.innerHTML = `${res.msg} <button type="button" class="btn-close" data-bs-dismiss="alert"></button>`
    flashContainer.appendChild(alertEl)
    // 3秒后自动关闭提示
    setTimeout(() => {
      bootstrap.Alert.getOrCreateInstance(alertEl).close()
    }, 3000)
  } else {
    // 未登录场景弹出登录模态框
    new bootstrap.Modal(document.querySelector('#login-modal')).show()
  }
})

3. 补充base.html全局Flash渲染逻辑（可选，兼容非异步场景） #

在base.html的body标签最开头加入全局渲染代码，保证普通页面跳转场景的Flash消息也能正常展示：

<div class="flash-container position-fixed top-0 end-0 p-3 z-3">
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
          {{ message }}
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}
</div>

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