HO C активация useEffect перед контекстом аутентификации ReactJs - PullRequest
Новая
       20

HO C активация useEffect перед контекстом аутентификации ReactJs

0 голосов
/ 05 августа 2020

У меня есть контекст аутентификации, который использует useEffect для получения данных из sessionStorage и устанавливает глобальную переменную user для передачи через контекстный api.

На каждом защищенном маршруте у меня есть useEffect внутри моего ho c, чтобы проверить, вошел ли пользователь в систему, и если он не отправляет пользователя обратно на страницу входа.

Однако useEffect внутри ho c срабатывает до того, как Контекст аутентификации и, следовательно, не видит данные аутентификации и каждый раз отправляет клиента на страницу входа в систему 


  const router = useRouter()

  const [ user, setUser ] = useState(null)
  const [ loading, setLoading ] = useState(false)

  useEffect(() => {
    async function loadUserFromSessionStorage() {
      const token = sessionStorage.getItem('accessToken')
      if (token) {
        const { data: { customer: { name } } } = await axios.get(`http://localhost:3002/customer/token/${token}`)
        if (name) setUser(name)
      }
      setLoading(false)
    }

    loadUserFromSessionStorage()
  })

  useEffect(() => {
    if(!!user) router.push('/')
  }, [ user ])

  return (
    <AuthContext.Provider
      value={{ isAuthenticated: !!user, loading, user}}
    >
      {children}
    </AuthContext.Provider>
  )
}

И это мой HO C: 

  return () => {
    const { user, isAuthenticated, loading } = useContext(AuthContext);
    const router = useRouter();
    useEffect(() => {
      if (!isAuthenticated && !loading){
        router.push("/login")
      }
      
    }, [ loading, isAuthenticated ]);

    return (
      isAuthenticated && <Component {...arguments} />
    )
  };
}

Кто-нибудь знаете, как это решить?

Ответы [ 2 ]

1 голос
/ 05 августа 2020

Как вы можете знать или не знать, хук useEffect в вашем HO C сработает до завершения хука, который загружает вашего пользователя из состояния сеанса.

Где вы ошиблись, так это в настройке вашего состояния загрузки значение false по умолчанию: 

const [ loading, setLoading ] = useState(false)

Когда вы делаете это в HO C обработчик эффекта 

if (!isAuthenticated && !loading)...

Это выражение будет истинным в первый раз, и вы будете перенаправлены на страница авторизации. Просто используйте вместо этого useState (true).

0 голосов
/ 05 августа 2020

Вы не передаете переменную loading в контекст, поэтому, когда вы деконструируете значение контекста в вашем HO C, это будет выглядеть так: 

{
    user: undefined,
    isAuthenticated: false,
    loading: undefined
}

, что на основе вашего logi c будет перенаправлен на вход.

Попробуйте добавить две другие переменные в свой AuthContext.Provider и посмотрите, поможет ли это вам.

...