我目前使用nextauth和最新版本的nextjs,目前无法在路由处理程序中获得令牌,除非它们被客户端命中。
我试过我在网上找到的例子。
// /api/test/route.js
import { NextResponse } from "next/server";
import { getToken } from "next-auth/jwt";
export async function GET(req) {
const token = await getToken({ req });
console.log(token);
return NextResponse.json({
message: "Success!",
token,
});
}
// /test/page.js
const Test = async () => {
const res = await fetch("http://localhost:3000/api/test");
const data = await res.json();
console.log("CLIENT- ", data);
return (
<div>
<p>Test</p>
</div>
);
};
这不起作用,它为token both返回null。然而,如果我转到url栏并直接在http://localhost:3000/api/test上点击API,那么两个console.logs都会返回一个完整的令牌,其中包含所有预期的数据。另外,如果我从客户端页面调用API,它的工作方式是这样的:
"use client";
import axios from "axios";
const Test = () => {
const getData = async () => {
const { data } = await axios.get("/api/test");
console.log(data);
};
return (
<div>
<button onClick={getData}>Get Data</button>
</div>
);
};
我怎样才能让它在服务器页面上工作?
1条答案
按热度按时间u5rb5r591#
当您从浏览器发出请求时,它会将以前的请求中所知道的内容传递到同一个域,例如cookie和凭据。但是,您的页面是一个服务器组件,在发出获取请求时不使用浏览器,也不沿着cookie和凭据等内容。
要从服务器组件(
test/page.js
)获取当前凭证,需要使用Next的helper读取cookies()
或headers()
。然后,您可以执行以下操作:
请注意,我没有检查Next-Auth将凭据(cookie或auth头)放在哪里,因此您需要调整代码以使其工作。
祝你好运!