我正在编写一个基本cookie/魔术链接认证的玩具示例。
流程如下:
1.如果在将请求发送到受保护路径时请求中缺少auth令牌cookie,则在这些路径的getServerSideProps
中,它会将它们重定向到https://myapp.com/auth/login
,在那里它们可以请求魔法链接
1.点击魔术链接https://myapp.com/auth/login?token=AUTH_TOKEN_VALUE
1.在登录页面的getServerSideProps
中,我从查询参数中提取AUTH_TOKEN_VALUE
并将其发送到API服务器以检查它是否有效
1.如果是,则将其设置为响应中的HttpOnly cookie,并重定向到主页https://myapp.com/
,一个受保护的路径
处理设置cookie和重定向的代码部分如下所示:
export const getServerSideProps: GetServerSideProps = async (context) => {
// code extracting AUTH_TOKEN_VALUE and sending it to backend API
context.res.writeHead(307, {
"Set-Cookie": // the HTTP only cookie containing AUTH_TOKEN_VALUE,
Location: "https://myapp.com/"
}).end()
return { props: {} };
}
理想情况下,这将导致NextJS应用程序向浏览器发送一个只包含这两个头的空响应。浏览器将接收并保存auth cookie,然后重定向到https://myapp.com/
。重定向的请求现在将具有auth cookie并成功转到https://myapp.com/
。
然而,奇怪的是,当我测试它时,我最终看到的页面是https://myapp/auth/login
。我做的第一件事是检查是否发生了重定向(通过控制台登录相应页面的getServerSideProps
),果然,它发生了。它首先到达/auth/login?token=AUTH_TOKEN_VALUE
端点,然后是/
端点,然后是/auth/login
端点。
我做的下一件事是检查是否设置了cookie,果然,它是(我在DevTools的Application选项卡中检查)。事实上,如果我随后手动导航到https://myapp.com/
,它不会将我重定向回/auth/login
,因为我有身份验证cookie。
我还测试了浏览器端重定向是否可以以这种方式完成,果然可以。
在getServerSideProps
中运行以下代码:
export const getServerSideProps: GetServerSideProps = async (context) => {
// other code
context.res.writeHead(307, {
Location: "https://example.com/?test=true"
});
return { props: {} };
}
事实上,它确实将我重定向到了https://example.com/?test=true
。这表明NextJS检查它是否可以执行内部重定向(可能通过检查Location
头的主机名),如果可以,它就执行。
有没有办法禁用这种行为,让浏览器做重定向?因为对于我的应用程序,我需要浏览器进行重定向,否则在重定向的请求中不会有我需要的身份验证cookie。
更新:
看来我的问题与NextJS无关,而是cookie策略。我把饼干设置为SameSite=strict
。这意味着每当我点击Gmail的链接时,auth cookie不会发送。当我通过直接粘贴链接进行测试时,一切都按照我的预期工作。
1条答案
按热度按时间oipij1gg1#
根据更新,这个问题与NextJS无关,而是cookie策略。我把cookies设置为
SameSite=strict
。这意味着每当我从Gmail点击一个链接时,例如,auth cookie确实会设置,但不会与重定向请求沿着发送。当我通过直接粘贴链接进行测试时,一切都按照我的预期工作。