求前端调用带@login_required的Flask-Login登出API代码示例

Flask-Login 默认通过 Session Cookie 维护登录状态，前端发送 POST 请求时，只要确保请求携带对应 Cookie（浏览器默认会自动携带同域 Cookie），即可通过 @login_required 校验。以下是两种常用的前端调用示例：

原生 JavaScript Fetch 示例 #

async function logout() {
  try {
    const response = await fetch('/auth/logout', {
      method: 'POST',
      credentials: 'include', // 确保携带Cookie，跨域场景必须设置
      headers: {
        'Content-Type': 'application/json'
      }
      // 若后端要求在POST体中传入凭证（如自定义token），可添加body：
      // body: JSON.stringify({ token: localStorage.getItem('authToken') })
    });

    if (response.ok) {
      console.log(await response.text()); // 输出"success"
      // 登出成功后的操作：清除前端存储、跳转登录页等
      localStorage.removeItem('authToken');
      window.location.href = '/login';
    } else {
      console.error('登出请求失败');
    }
  } catch (err) {
    console.error('请求出错:', err);
  }
}

// 触发登出
logout();

Axios 示例 #

async function logout() {
  try {
    const response = await axios.post('/auth/logout', 
      // 若需在POST体传凭证，此处放对应数据：{ token: localStorage.getItem('authToken') }
      {},
      {
        withCredentials: true // 确保携带Cookie
      }
    );

    console.log(response.data); // 输出"success"
    // 登出后清理操作
    localStorage.removeItem('authToken');
    window.location.href = '/login';
  } catch (err) {
    console.error('登出失败:', err);
  }
}

// 触发登出
logout();

注意事项 #

• 若后端采用 JWT 而非 Session Cookie，需将令牌放在请求头（如 Authorization: Bearer ${token}）或 POST 体中，同时后端要调整校验逻辑。
• 同域请求时，显式设置携带凭证的参数更稳妥，避免浏览器因安全策略丢弃Cookie。

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