Next.js中如何将单个getServerSideProps方法复用至多个页面

你可以将鉴权逻辑抽为可复用的高阶函数，存到公共工具文件中，所有需要相同鉴权逻辑的页面直接调用即可，具体步骤如下：

步骤1：抽离公共鉴权逻辑 #

新建公共工具文件（例如utils/getSSRAuth.js），写入如下代码：

import { parsedCookie } from "@infrastructure/utils/functions";

/**
 * 带鉴权的getServerSideProps高阶封装
 * @param {Function} [pageGetServerSideProps] 页面自定义的getServerSideProps逻辑，可选
 * @returns {Function} 合并了鉴权逻辑的getServerSideProps方法
 */
export const withAuthSSR = (pageGetServerSideProps) => async (context) => {
  // 通用鉴权逻辑
  const token = parsedCookie(context.req);
  const { accessToken, refreshToken } = token;
  if (!accessToken || !refreshToken) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

  // 若页面有自定义服务端逻辑，执行后返回结果
  if (typeof pageGetServerSideProps === "function") {
    const pageResult = await pageGetServerSideProps(context);
    return pageResult;
  }

  // 无自定义逻辑直接返回空props
  return {
    props: {},
  };
};

步骤2：页面中调用复用 #

无自定义服务端逻辑的页面（你当前的Overview页改造示例） #

import DashboardLayout from "@app/layout/DashboardLayout";
import Overview from "@containers/dashboard/Overview";
// 引入封装好的高阶方法
import { withAuthSSR } from "@/utils/getSSRAuth";

const OverviewPage = () => {
  return (
    <DashboardLayout>
      <Overview />
    </DashboardLayout>
  );
};

export default OverviewPage;

// 直接调用高阶方法即可，无需重复写鉴权逻辑
export const getServerSideProps = withAuthSSR();

有自定义服务端逻辑的页面示例 #

如果其他页面需要在鉴权通过后执行自己的服务端数据请求，直接将自定义逻辑作为参数传入即可：

// 其他需要鉴权的业务页面
export const getServerSideProps = withAuthSSR(async (context) => {
  // 页面自定义逻辑：比如请求业务数据
  const res = await fetch("你的业务接口地址");
  const businessData = await res.json();

  return {
    props: {
      businessData,
    },
  };
});

内容的提问来源于stack exchange，提问作者Kamrul Islam