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

Question

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

我糊涂了.我如何处理会话？我们认为我们在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或类似的东西怎么可能是安全的我不知道.

我需要一些帮助他们从事类似项目的工作.你可以给我一些建议.因为我从未做过类似的项目.

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

• 使用基于HttpOnly cookie的单页应用程序进行身份验证和会话管理
• SPA身份验证和会话管理的最佳实践

我仍然很困惑我能做些什么.

Answer 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 开发者控制台中，转到“应用程序”选项卡，从左侧菜单展开 Cookie，然后查看存在 Cookie 的主机。应该存在一个在之前步骤中设置的 cookie。如果不是，则浏览器不接受 cookie。当您为某个域或路径设置的 cookie 不正确时，通常会发生这种情况。在这种情况下，您可以尝试将域和/或路径设置为空或正确的值（如果路径为“/”）。如果您的 cookie 存在，请转到步骤 3

步骤3）

请记住我说过该应用程序与会话无关。您使用 ajax 发送的每个请求或仅在浏览器中输入有效 URL 发送的每个请求都会发送请求标头中该主机存在的所有 cookie。除非您主动阻止您使用的任何库来执行此操作。如果您的请求不包含会话 cookie，则以下情况之一通常为真：

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

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

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