flask-jwt-extended - Flask JWT Extended - access_token（标头）和 refresh_token（httpOnly cookie）的不同位置

Question

如何使用 flask-jwt-extended 配置烧瓶应用程序，我们需要类似下面的内容。

1. AccessToken/Bearer 必须作为 Header（而不是 cookie）发送
2. RefreshToken 必须作为 httpOnlyCookie 发送，仅用于 /api/refreshtoken 路径

如何设置两个不同的令牌，一个在标头中，一个在 cookie 中？我们可以将两者都设置为 cookie 或都设置为标头。

有什么帮助吗？

谢谢拉克西特

Answer 1

我想在构建 React + Flask 单页应用程序时做同样的事情，因为我是一个初学者，在尝试理解授权和身份验证几天后感到头疼。

无论如何，我设法做到了：

在 Flask 中，配置：

app.config['JWT_TOKEN_LOCATION'] = ['headers', 'cookies']
app.config['JWT_REFRESH_COOKIE_PATH'] = '/auth/refresh'

我在登录功能中返回的内容：

resp = jsonify({'access_token': access_token})
set_refresh_cookies(resp, refresh_token)
return resp, 200

在我的刷新功能中：

# Refresh access token
@app.route('/auth/refresh', methods=['POST'])
@jwt_refresh_token_required
def refresh():
    user = get_jwt_identity()
    resp = {
        'access_token': create_access_token(
            identity={
                'username': user['username'],
                'role': user['role']
            },
            expires_delta=timedelta(seconds=600),
            user_claims=user['role']
        )
    }
    return jsonify(resp), 200

在前端，我收集 JSON access_token 并将其设置在内存中，并使用 withCredentials 通过我的 API 调用发送 refresh_token。

axios.defaults.withCredentials = true;
axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`;

更确切地说：

.then(({ data: { access_token } }) => {
      axiosHttp.defaults.headers.common['Authorization'] = `Bearer ${access_token}`;
      return jwt_decode(access_token);
    })

然后我在 React 上下文组件中使用来自我解码的 access_token 的数据来验证对页面的访问，具体取决于角色。

注销只是将我的上下文设置为空并调用 api 来取消设置刷新 cookie

@app.route('/auth/logout', methods=['DELETE'])
@jwt_required
def logout():
    resp = jsonify({"msg": "Successfully logged out"})
    unset_jwt_cookies(resp)
    return resp, 200

最后它很简单，但我花了很长时间才弄清楚！