Return Next.js 中高阶身份验证组件中的附加数据

Question

我有如下一段代码：

export const requireAuth = (gssp: GetServerSideProps) => {
  return async (ctx: GetServerSidePropsContext) => {
    const { req } = ctx;
    let session = null;

    if (req?.headers?.cookie) {
      session = await getSession(req?.headers?.cookie);
    };

    if (!session) {
      return {
        redirect: {
          permanent: false,
          destination: '/login',
        },
      };
    };
    return await gssp(ctx);
  };
};

我也在尝试 return await gssp(ctx) 中的会话，我是 NextJS 的新手，我找不到任何相关的关于此的信息。

当前方法允许我按以下方式使用此组件：

export const getServerSideProps: GetServerSideProps = requireAuth(async _ctx => {
  let account;
  let stats = {};

  if (_ctx?.req?.headers?.cookie) {
    account = await getSession(_ctx?.req?.headers?.cookie);
  }

  try {
    const X = fetchSomeData...;
  } catch (error) {
    console.log('Pages/Index Fetching Error: ', error);
  }

  return {
    props: {
      account: account,
      data: X,
      navbar: true,
      footer: true,
    },
  };
});

与其他 HOR 方法相比，它允许在使用它的页面上添加额外的逻辑。

有什么方法可以 return 主 requireAuth 组件中的会话而不是在每个页面上获取它？

Answer 1

您可以控制 higher-order 函数传递给实际 gssp 函数的内容，因此您可以简单地在 ctx 对象中传递会话。

export const requireAuth = (gssp: GetServerSidePropsWithSession) => {
    return async (ctx: GetServerSidePropsContext) => {
        const { req } = ctx;
        const session = req?.headers?.cookie ? await getSession(req?.headers?.cookie) : null;

        if (!session) {
            return {
                redirect: { permanent: false, destination: '/login' }
            };
        };

        const ctxWithSession = { ...ctx, session };

        return await gssp(ctxWithSession);
    };
};

然后您可以访问 getServerSideProps 代码中的 session。

interface GetServerSidePropsContextWithSession extends GetServerSidePropsContext {
    session?: Session;
}

type GetServerSidePropsWithSession<P extends { [key: string]: any } = { [key: string]: any }> = (
    context: GetServerSidePropsContextWithContext
) => Promise<GetServerSidePropsResult<P>>;

export const getServerSideProps: GetServerSidePropsWithSession = requireAuth(async _ctx => {
    const account = _ctx.session;
        
    // Remaining code...
});

请注意，您需要扩展 GetServerSideProps 类型以期待 session 字段。

Return Next.js 中高阶身份验证组件中的附加数据

Return additional data in higher-order authentication component in Next.js

authentication

typescript

next.js