将 js 前端连接到 fastapi 应用程序 - 身份验证问题

Question

我按照 https://fastapi.tiangolo.com/tutorial/security/oauth2-jwt/ 中描述的步骤进行了复制粘贴。

我有一个具有以下形式的登录页面：

...
<form class="login_form" id="login_form">
  <div class="username_div">
    <input type="text" id="username_id" name="username" placeholder="Username"><br>
  </div>
  <div class="password_div">
    <input type="password" id="password_id" name="password" placeholder="Password">
  </div>
  <div class="btn_div">
    <input type="button" id="btn_id" value="Login" class="login_btn" onclick="token()">
  </div>
</form>
...

我有一个可以成功获取token的js文件：

function token() {
    fetch('/token', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'username=test&password=test'
    }).then(res => {
        return res.json();
    }).then(json => {
        console.log(json['access_token']);
    });
}

现在当我添加

window.location.href = "/users/me/";

在 console.log(json['access_token]); 之后我得到一个“未认证”。

据我所知，我需要以某种方式将令牌传递给 fastapi 部分。我该怎么做？

编辑：

所以我在这里有一些困惑。但我现在可以使用以下代码打印用户数据：

function token() {
    fetch('/token', {
        method: 'POST',
        headers: {
            'accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'grant_type=&username=test&password=test&scope=&client_id=&client_secret='
    }).then(res => {
        return res.json();
    }).then(json => {
        console.log(json['access_token']);
        fetch('/users/me', {
            method: 'GET',
            headers: {
                'accept': 'application/json',
                'Authorization': 'Bearer ' + json['access_token']
            }
        }).then(res => {
            return res.json();
        }).then(json => {
            console.log(json);
        });
    });
}

在我的登录页面添加凭据后，我仍然不知道如何进入新页面（需要授权）。你能帮帮我吗？

Answer 1

因此，根据此 post，向重定向添加自定义 header 是不可能的。看来我需要使用 cookie。

非常感谢@Isabi。

将 js 前端连接到 fastapi 应用程序 - 身份验证问题

Connecting js frontend to fastapi application - authentication problem

html

javascript

authentication

frontend

fastapi