问题描述
我想用 svelte/Kit 创建一个网站并使用 JWT。 我在互联网上找到了说明,例如: 纤细的 JWT 身份验证 https://morioh.com/p/1d95522418b2 使用 Cookie 的 svelteKit 会话身份验证 https://www.youtube.com/watch?v=bG7cxwBMVag 但不幸的是,没有关于 svelte Kit 和 JWT 的说明。所以我自己试了一下。
令牌在端点生成,但未到达页面(或不可调用)。我怀疑标题中的某些设置是错误的,但无法弄清楚出了什么问题。这是我高度简化的测试环境:
(1) 我从页面 index.svelte 调用端点 login.js。为了测试,我省略了检查电子邮件和密码并立即将 JWT 发回。数据到达,但我没有看到 JWT。
(2) JWT 应该发送到另一个端点。这样做的最佳方法是什么?
<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
解决方法
我认为您将身份验证的两个主要部分混为一谈:
- 请求/发送凭据。
- 使用这些凭据访问受保护的内容。
Authorization: Bearer ${token}
通常从(浏览器)客户端发送到服务器,以请求访问受保护的内容。所以现在,您的服务器正在向客户端请求许可。这没有意义。
相反,登录端点应通过以下方式发送令牌:
-
Set-Cookie
登录端点中的标头。 - 响应的
body
(其中passwordOk
是)。
Set-Cookie
使浏览器在以后的每个请求中都将此值作为 cookie 发送。服务器可以在提供受保护内容之前检查此 cookie 值。这会更安全,因为您可以发送一个仅限 HTTP 的 cookie。
如果令牌在登录响应正文中发送,则客户端应在以后的请求中使用 Authorization: Bearer ${token}
标头发送令牌。然后,服务器可以在提供受保护的内容之前检查此标头。