如何从服务器端组件中的本地存储获取jwt令牌

Question

登录 api 响应 jwt 令牌后，我将其存储在本地存储中。然后从服务器组件我想将此令牌获取到 api 请求。如何？我用的是nextjs14。

我使用上下文来存储令牌。但不知道这是否是最佳实践。

Answer 1

您无法访问服务器组件内的

localStorage

对象，因为它是浏览器特定的 API。但是，在使用服务器组件时可以使用不同的方法。

替代品

您可能想查看 iron-session 包。然后，您可以在服务器组件内访问创建的会话，如下所示：

export default async function Page(): Promise<JSX.Element> {
  // inside your session object you can then access the jwt
  // via the defined property.
  const session = await getIronSession(cookies(), sessionConfig);
  return <>My token: {session?.jwt}</>;
}

因为这些会话是无状态的并且仅存在于服务器上，所以如果您想在客户端获取某些内容，您可以使用服务器操作。

export default async function Page(): Promise<JSX.Element> {
  const session = await getIronSession(cookies(), sessionConfig);

  const fetchData = async (userInput: string) => {
    "use server"; // <- turns this function into a server action
    const response = await fetch(`https://example.com?q=${userInput}`, {
      headers: { Authorization: `Bearer ${session?.jwt}` },
    });
    return await response.json();
  }

  return <MyClientComponent onFetch={fetchData} />
}

正如您在上面的示例中所看到的，服务器操作接收用户在客户端输入的

userInput

，并在服务器上获取数据，而无需令牌位于客户端。