Question

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

我使用 API 路由 @auth0/nextjs-auth0 从 /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;

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

我尝试像这样完全限定网址：

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

但这会在 SSR 层引发错误：

The user does not have a valid session.

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

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

Answer 1

您应该直接调用 getServerSideProps 函数来检索令牌，而不是从服务器端向您的 API 路由发出请求（我假设使用 getAccessToken）。

import { getAccessToken } from './api/token' // Replace with the path to your API route

export async function getServerSideProps({ req, res }) {
    const { accessToken } = await getAccessToken(req, res);

    // Remaining code
}

API 路由中的任何逻辑都应直接在 getServerSideProps 中使用，因为它们无论如何都在服务器上运行。

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

1 个答案: