如何在 Vue 和 Flask 中使用会话？

Posted 2023-03-07

【中文标题】如何在 Vue 和 Flask 中使用会话？

【英文标题】：How to work with sessions in Vue and Flask?

【发布时间】：2017-11-29 18:19:05

【问题描述】：

您知道，Web 应用程序需要会话或 cookie 来进行身份验证。我尝试使用 Vue.JS 和 Flask 微框架（例如 ERP 或 CRM）构建 Web 应用程序。

我很困惑。如何使用会话？假设我们在 Flask 中有这样的代码：

import os
from flask import Flask, request, jsonify, abort, session

app = Flask(__name__)
app.config['SECRET_KEY'] = os.getenv('SECRET_KEY') or \
    'e5ac358c-f0bf-11e5-9e39-d3b532c10a28'

@app.route('/login', methods=['POST'])
def user_login():
    user = request.form['user']
    session['isLogged'] = True
    return jsonify('status': session['isLogged'])

@app.route('/user-info')
def user_info():
    if 'isLogged' in session:
        return jsonify('user': 'ali')
    else:
        return jsonify('error': 'Authentication error')

我们的前端代码应该是这样的：

  mounted() 
    this.checkIsLogged();
  ,
  methods: 
    checkIsLogged() 
      fetch('http://127.0.0.1:5000/user-info', 
        mode: 'no-cors',
        method: 'GET',
      ).then((resp) => 
        return resp;
      ).then((obj) => 
        if(obj.user) 
          this.status = true
        
      )
    ,
    login() 
      let frmData = new FormData(document.querySelector("#frmLogin"));

      fetch('http://127.0.0.1:5000/login', 
        mode: 'no-cors',
        method: 'POST',
        body: frmData,
      ).then((resp) => 
        return resp;
      ).then((obj) => 
        this.status = obj.status
      )
    
  

在我刷新页面之前一切正常。当我刷新页面时，我会丢失会话。

出于多种原因，服务器端会话很重要。如果我使用localStore 或类似的东西，我不知道如何安全。

我需要一些从事类似项目的帮助。你可以给我建议。因为我从来没有做过类似的项目。

我读过的关于这个主题的其他内容：

Single page application with HttpOnly cookie-based authentication and session management SPA best practices for authentication and session management

我仍然对我能做什么感到困惑。

【问题讨论】：

您是否在跨域发送请求？会话和 cookie 不会发送到哪里？

【参考方案1】：

会话处理是您的 SPA 并不真正关心的事情。会话在用户代理（浏览器）和服务器之间。您的 vue 应用程序与它没有太大关系。这并不是说你不能做错什么，但通常问题不在于你的前端。

话虽如此，很难回答这个问题，因为我们真的不知道出了什么问题。我能做的就是向您提供有关如何诊断此类问题的说明。在此诊断过程中，您将找出实际问题出在哪里，至少对我而言，我需要做什么通常会变得很明显。

步骤 1)

使用一些低级 HTTP 工具来检查服务器响应（我个人懒惰时使用 curl 或 Postman）。将登录请求发送到服务器并查看响应标头。 登录成功后，您应该有一个标题“Set-Cookie”，通常带有“sessionid”的内容或您用于会话的任何密钥。 如果您没有看到“Set-Cookie”，则以下情况之一为真：

您的服务器没有启动会话，因此没有向客户端发送会话 cookie 在某处过滤掉 Cookie 的代理/防火墙/反广告或跟踪插件

如果您看到 Set-Cookie 标头，请继续执行第 2 步，否则请查看有关您选择的后端技术中会话的手册。

步骤 2)

谢天谢地，大多数现代浏览器都有一个开发者控制台，可让您做两件事： 1) 检查您的 HTTP 请求标头、正文和响应标头和正文 2) 查看存储的 cookie

使用第一个功能（在 Chrome 中，这将在开发者控制台的“网络”标签下）诊断请求和响应。为此，您需要在应用程序中执行登录时打开开发者控制台。检查登录的响应，如果登录成功，它应该包含 Set-Cookie。 如果 cookie 不存在，您的服务器不会发送它，可能是出于安全原因（跨域策略）。

如果存在，则 cookie 现在必须存在于 cookie 存储中。在 chrome 开发者控制台中，转到“应用程序”选项卡，从左侧菜单中展开 Cookies，然后查看存在 cookie 的主机。应该有一个在之前步骤中设置的 cookie。如果不是，浏览器不接受 cookie。这通常发生在您为某个域或路径设置了不正确的 cookie 时。在这种情况下，您可以尝试将域和/或路径设置为空值或正确值（如果路径为“/”）。 如果您的 cookie 存在，请转到第 3 步

步骤 3)

记得我说过应用程序与会话无关。您使用 ajax 发送的每个请求或只是在浏览器中输入有效 URL 都会发送请求标头中该主机的所有 cookie。那是除非您主动阻止您使用的任何库。 如果您的请求不包含会话 cookie，则以下情况之一通常是正确的：

使用您的 http 库会主动阻止发送 cookie 您正在发送正确的请求，但 cookie 域/路径与请求主机/路径不匹配，因此不会一起发送 您的 cookie 非常短暂并且已经过期

如果您的 cookie 发送正确，那么您的会话处理应该可以正常工作，除非您的服务器不记得该会话或不管现有会话如何都启动一个新会话。

我意识到这个问题已经很老了，这个广泛的答案来得太晚了，但是有类似问题的人可能能够从中受益。