令牌在端点生成但未到达页面

Question

我想用 Svelte/Kit 创建一个网站并使用 JWT。我在网上找到了说明，例如： Svelte JWT 身份验证 https://morioh.com/p/1d95522418b2 SvelteKit Session 使用 Cookie 进行身份验证 https://www.youtube.com/watch?v=bG7cxwBMVag 但不幸的是，没有关于 Svelte Kit 和 JWT 的说明。所以我自己试了一下。

令牌在端点生成，但未到达页面（或不可调用）。我怀疑 headers 中的某些设置有误，但无法找出问题所在。这是我高度简化的测试环境：

(1) 我从页面 index.svelte 调用端点 login.js。为了进行测试，我省略了检查电子邮件和密码并立即将 JWT 发回。数据到达，但我没有看到 JWT。

(2) JWT 应该发送到另一个端点。最好的方法是什么？

“页面”index.svelte（简体）：

<script>
  let email="", password="";
    
  const doLogin = async () => {
    const response = await fetch("/auth/login", {
      method: 'POST',
      headers: {
    "Content-Type": "application/json",
      },
      credentials: 'include',
      body: JSON.stringify({
    email,
    password
      })
    }); 
    
    if (response.status == 200) {
      const { done, value } = 
        await response.body.getReader().read();
      await console.log("done, value=", done, 
        JSON.parse(new TextDecoder("utf-8").decode(value)));
      await console.log("headers=", response.headers);
    }
  }
</script>

<h1>Welcome to MyAuth</h1>
<input type=email bind:value={email}/><br/>
<input type=password bind:value={password}/><br/>
<button on:click={doLogin}>Submit</button>

“端点”login.js（简体）：

import jwt from "jsonwebtoken";  

export function post(request, context) {
  const token = jwt.sign({
    data: { text: "test" },
    "topsecret", 
  });  
    
  const response = {
    status: 200,
    headers: {
      'content-type': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: {
      passwordOk: true,
    }
  };
  return response;
}

控制台显示：

done, value= false {passwordOk: true}
index.svelte:59 headers= Headers {}
index.svelte:44 Fetch finished loading: POST "http://localhost:3000/auth/login".
doLogin @ index.svelte:44

Answer 1

我认为您混淆了身份验证的两个主要部分：

Requesting/sending 凭据。
使用这些凭据访问受保护的内容。

Authorization: Bearer ${token} 通常从（浏览器）客户端发送到服务器以请求访问受保护的内容。所以现在，您的服务器正在向客户端请求许可。这没有意义。

相反，登录端点应通过以下方式发送令牌：

Set-Cookie header 在登录端点中。
响应的 body（其中 passwordOk 是）。

Set-Cookie 使浏览器在以后的每个请求中将此值作为 cookie 发送。服务器可以在提供受保护内容之前检查此 cookie 值。这可以更安全，因为您可以发送仅 HTTP cookie。

如果令牌是在登录响应的 body 中发送的，则客户端应在以后的请求中使用 Authorization: Bearer ${token} header 发送令牌。然后，服务器可以在提供受保护的内容之前检查此 header。

令牌在端点生成但未到达页面

Token is generated at the endpoint but does not arrive on the page

jwt

svelte

sveltekit