在GET路由处理程序中访问令牌NextJS 13.4

uelo1irk  于 2023-05-28  发布在  其他
关注(0)|答案(1)|浏览(131)

我目前使用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>
  );
};

我怎样才能让它在服务器页面上工作?

u5rb5r59

u5rb5r591#

当您从浏览器发出请求时,它会将以前的请求中所知道的内容传递到同一个域,例如cookie和凭据。但是,您的页面是一个服务器组件,在发出获取请求时不使用浏览器,也不沿着cookie和凭据等内容。
要从服务器组件(test/page.js)获取当前凭证,需要使用Next的helper读取cookies()headers()
然后,您可以执行以下操作:

// test/page.js

const Test = async () => {
    const headersList = headers();
    const token = headersList.get("Authorization");
    const res = await fetch("http://localhost:3000/api/test", {
        headers: { Authorization: `Bearer ${token}` }
    });

   //...
}

请注意,我没有检查Next-Auth将凭据(cookie或auth头)放在哪里,因此您需要调整代码以使其工作。
祝你好运!

相关问题