flask - 如何在 Vue 和 Flask 中使用 session ？

Question

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

我很困惑。我如何使用 session ？假设我们在 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
      })
    }
  }

刷新页面之前一切正常。当我刷新页面时，我丢失了 session 。

服务器端 session 很重要，原因有很多。如果我使用 localStore 或类似的东西，我不知道如何保证安全。

我需要一些从事过类似项目的帮助。你可以给我建议。因为我从未参与过类似的项目。

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

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

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

Answer 1

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

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

步骤 1)

使用一些低级 HTTP 工具来检查服务器响应(我个人懒惰时使用 curl 或 Postman)。将登录请求发送到服务器并查看响应 header 。当登录成功时，您应该有一个 header “Set-Cookie”，通常带有“sessionid”的内容或您用于 session 的任何 key 。如果您没有看到“Set-Cookie”，则符合以下条件之一:

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

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

步骤 2)

值得庆幸的是，大多数现代浏览器都有一个开发者控制台，它允许您做两件事:1) 检查您的 HTTP 请求 header 、正文和响应 header 和正文2) 查看存储的 cookie

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

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

步骤三)

请记住我说过应用程序与 session 无关。您使用 ajax 发送的每个请求或仅在浏览器中输入有效的 URL 都会在请求 header 中发送该主机的所有 cookie。那是除非你主动阻止你正在使用的任何图书馆这样做。如果您的请求不包含 session cookie，则通常是以下情况之一:

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

如果您的 cookie 被正确发送，那么您的 session 处理应该可以正常工作，除非您的服务器不记得该 session 或启动一个新 session 而不考虑现有 session 。

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