0

我在框架 Next.js 中有 React 应用程序（但框架并不重要），并实现了身份验证。

当前应用程序在首次加载后通过 API 调用获取用户会话数据（我正在next-auth为此使用）。这导致加载和会话获取之间存在间隔，这导致用户在整个应用程序中看到加载微调器的间隔很小。

我想通过实施 SSR（服务器端渲染）来缓解这种情况，我可以在其中使用会话数据来补充初始响应。

这可以通过getServerPropsComponent 中的方法在 Next.js 中轻松完成，但问题是我需要在我拥有的每个页面上实现此方法。

这就是为什么我正在寻找一种方法使会话状态在整个应用程序中全局化，以便每个页面（组件）都可以访问此会话数据。

我的主要问题是，如果我应该使用 HOC 包装器来实现getServerProps接收会话数据，或者我应该使用 Redux 存储并通过相同的方法水合这个存储。

我不确定 HOC 是否仍被广泛使用，或者它们现在已被弃用。

我不想getInitialProps在 Next.js 自定义_app.js文件中实现，因为这将禁用静态生成页面的能力，并且会话将在每个页面中可用。我计划该应用程序仅在大约一半的页面中需要此会话数据。

那么我应该使用 HOC 还是为此添加 redux 存储？

4

1 回答 1

2

您可以执行以下操作：

创建一个身份验证上下文提供程序，它将身份验证数据向下传递到您的组件。举个例子：

interface ContextProps {
  authenticated: boolean;
  handleLogin: () => void;
  handleLogout: () => void;
}

const authContext = createContext<Partial<ContextProps>>(undefined);

与 Context 一起创建一个钩子，useEffect用于确定身份验证状态 - 可能是检查 cookie 是否存在，或等待调用 API 以检查身份验证状态。将此设置为相关状态并在您的提供程序中使用此值。

interface AuthProviderProps {
  children: any;
}

const AuthProvider = (({ children }: AuthProviderProps) => {
  const auth = useProvideAuth();

  return <authContext.Provider value={auth}>{children}</authContext.Provider>;
});

export const useAuth = () => useContext(authContext);

export default AuthProvider;

包裹在你的_app.js:

...
<AuthProvider>
   <Component pageProps={pageProps} />
</AuthProvider>
...

在相关页面中访问：

const Page = () => {
  const { authenticated } = useAuth();

  if (!authenticated) {
    return (
      <>
        Not authenticated
      </>
    );
  }
  ...

然后你可以在你的相关组件中消费

于 2021-03-10T22:26:56.927 回答