带有身份验证会话的 React 应用程序中的 Redux 与 HOC

问题描述

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

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

我想通过实现 SSR（服务器端渲染）来缓解这种情况，在这种情况下，我可以将初始响应与会话数据结合起来。

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

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

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

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

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

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

解决方法

您可以执行以下操作：

创建一个身份验证 Context Provider，将身份验证数据向下传递到您的组件。举个例子：

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
      </>
    );
  }
  ...