在 NextJS getServerSideProps 中使用 Bearer token 装饰 api 请求

Question

我正在使用axios拦截器用标头来装饰我的所有请求Authorization。

@auth0/nextjs-auth0我通过使用 API 路由获取令牌/api/token：

import auth0 from '@/libs/auth0/auth0';
import { AccessTokenResponse } from '@auth0/nextjs-auth0/dist/tokens/token-cache';
import { NextApiRequest, NextApiResponse } from 'next';

export async function getAccessToken(
  req: NextApiRequest,
  res: NextApiResponse
): Promise<AccessTokenResponse> {
  const tokenCache = auth0(req).tokenCache(req, res);
  return tokenCache.getAccessToken();
}

export default async function token(
  req: NextApiRequest,
  res: NextApiResponse
): Promise<void> {
  try {
    const { accessToken } = await getAccessToken(req, res);
    res.status(200).end(accessToken);
  } catch (error) {
    res.status(error.status || 500).end(error.message);
  }
}

api 路由在客户端请求上运行良好，我可以看到添加的令牌和正在处理的请求。

const { token } = await axios.get('/api/token');

    const result = {
      ...config,
      headers: {
        Authorization: `Bearer ${data}`,
      },
    };
    return result;

然而，当我使用相同的拦截器时，这不适用于 SSR 页面axios。

我尝试完全限定网址，如下所示：

const { token } = await axios.get('http://localhost:3000/api/token');

但这会在 SSR 层引发错误：

The user does not have a valid session.

我不知道如何从令牌缓存中获取令牌以在拦截器中用于通过 SSR 进行的 api 调用？

有什么想法或者类似的经历吗？

Answer 1

我选择将令牌存储为所有请求的 cookie，并在使用 SSR 时通过上下文参数中的 req 键访问它：

export const getServerSideProps: GetServerSideProps = async ({ req }) {
    const accessToken = req.cookies.token

    // Remaining code
}

https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props