使用 Next.js 和 Redux 进行身份验证答案

【问题标题】：Authentication with Next.js and Redux使用 Next.js 和 Redux 进行身份验证
【发布时间】：2021-02-25 05:21:15
【问题描述】：

这是我的情况。我正在尝试在负载上对用户进行身份验证，并且需要在 pages/_app.js 文件中运行身份验证。这是错误 useReduxContext.js:24 Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider> 。有没有办法在包装的<Provider> 中运行身份验证。这是代码框的link

文件页面/_app.js

import React, { useEffect } from 'react';
import { Provider, useDispatch } from 'react-redux';

import { auth } from '../lib/firebase.js';
import { getUserLoggedIn } from '../store/user.js';

import configureAppStore from '../store/configureAppStore.js';

import Header from '../components/nav/Header.jsx';

const store = configureAppStore();

function MyApp({ Component, pageProps }) {
  const dispatch = useDispatch();
  // to check firebase auth state
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(async (user) => {
      if (user) {
        const idTokenResult = await user.getIdTokenResult();
        dispatch(
          getUserLoggedIn({
            email: user.email,
            token: idTokenResult.token,
          })
        );
      }
    });

    // cleanup
    return () => unsubscribe();
  }, []);
  return (
    <>
      <Provider store={store}>
        <Header />
        <Component {...pageProps} />
      </Provider>
    </>
  );
}

export default MyApp;

【问题讨论】：

标签： javascript reactjs redux next.js

【解决方案1】：

此问题的一个简单解决方案是创建一个空组件，在 useEffect 中为您运行身份验证。

import React, { useEffect } from 'react';
import { Provider, useDispatch } from 'react-redux';

import { auth } from '../lib/firebase.js';
import { getUserLoggedIn } from '../store/user.js';

import configureAppStore from '../store/configureAppStore.js';

import Header from '../components/nav/Header.jsx';

const store = configureAppStore();

function MyApp({ Component, pageProps }) {
  const AuthComponent = React.memo(() => {
      const dispatch = useDispatch();
      // to check firebase auth state
      useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged(async (user) => {
          if (user) {
            const idTokenResult = await user.getIdTokenResult();
            dispatch(
              getUserLoggedIn({
                email: user.email,
                token: idTokenResult.token,
              })
            );
          }
        });

        // cleanup
        return () => unsubscribe();
      }, []);

      return null;
  })
 
  return (
    <>
      <Provider store={store}>
        <AuthComponent />
        <Header />
        <Component {...pageProps}

 />
      </Provider>
    </>
  );
}

export default MyApp;

【讨论】：