如何使用 Flask 和 jQuery 进行重定向答案

【问题标题】：How to redirect with Flask and jQuery如何使用 Flask 和 jQuery 进行重定向
【发布时间】：2013-06-19 09:22:17
【问题描述】：

我正在使用 Flask 作为我的后端，并使用 jQuery 来处理我正在处理的个人项目。

登录我想这样做：

$.ajax({ 
    type: "POST",
    data: JSON.stringify(body), //username and password
    contentType: 'application/json; charset=utf-8',
    url: "/login",
    success: successFunction,
    error: errorFunction,
    complete: completeFunction
});

在errorFuction中我会告诉用户他们的用户名或密码不正确等等。

在后端我的 /login 路由看起来像这样

@app.route("/login", methods=['GET', 'POST'])
def login():
    if(request.method == "POST"):
        #retrieve the username and password sent
        data = request.json

        if(data is None or not 'username' in data or not 'password' in data):
            abort(400)
        else:
            count = User.query.filter(User.username == data['username']).count()
            if(count == 0):
                abort(404) #that user doesnt exist
            else:
                passIsCorrect = User.query.filter(User.username == data['username'],
                                                  User.password == data['password']).count()
                if(passIsCorrect):
                    session['user'] = data['username']
                    return redirect(url_for('index'))
                else:
                    abort(401)

    else:
        return render_template('login.html')

但是在客户端，浏览器不会重定向，如果我查看完整函数中的响应对象，我会看到通常从我的“/”路由返回的内容：200 OK 和 index.html 模板。

我的问题是：

有什么方法可以拦截让客户端重定向吗？

我认为问题是因为 jquery 是发起请求而不是浏览器。

我第一次尝试解决这个问题是使用make_response 自己构建响应并设置 Location 标头，但这导致了相同的行为。我目前的解决方案是返回 200，然后客户端执行 window.location = "/"，但这似乎很hacky

【问题讨论】：

如果您想复制常规表单的行为，为什么还要使用 AJAX？另外，不要存储明文密码。散列它们。
您可能想查看Flask-Login 以完成此任务。它可能会比大多数自建的身份验证系统更安全。
@Blender 最终会通过 https
@bio595：没什么区别。散列它们。
@Blender 另外，使用 AJAX 以便在出错时我可以显示（）一些错误 div

标签： jquery ajax http redirect flask

【解决方案1】：

ajax 调用的重定向不起作用，浏览器不支持它们。大多数人通过在 JSON 响应中返回代码 200 和要重定向到的 URL 来实现自己的自定义重定向解决方案。请参阅this question 了解一些很好的示例。

作为旁注，通过 ajax 发布登录表单并没有真正给您带来太多优势，我会让浏览器正常发布表单，然后您的 Flask 视图函数在成功时重定向到新页面或重定向回登录页面失败，可能带有flash 消息以通知用户错误。

【讨论】：

【解决方案2】：

没有理由将重定向与 ajax 一起使用，因为它会返回重定向的内容（在您的情况下，只是带有 index 端点的内容）。因此，如果一切正常（状态 200），您可以返回链接以重定向，而不是真正的重定向：

return url_for('index')

并用你的js处理它：

var successFunction = function (data) {
    // do something
    window.location = data;
};

【讨论】：