Блог

У меня есть 2 маршрута, по которым я не хочу разрешать доступ зарегистрированному пользователю.

 /login
/forgot-password
 

В этих компонентах я применил useEffect функцию, чтобы определить, «вошел» ли пользователь в систему таким образом:

 useEffect(() => {
    if(isLogged()){
      history.push("/dashboard")
    }
  }, [])

export const isLogged = () => {
    return (
        localStorage.getItem("userid") !== null ||
        localStorage.getItem("authUser") !== null ||
        localStorage.getItem("token") !== null ||
        localStorage.getItem("permission") !== null
    )
}
 

Теперь, если пользователь вошел в систему, он переходит в /dashboard

на /dashboard я проверяю подлинность пользователя с помощью запроса API на сервер, и если данные неверны, я перенаправляю пользователя на /logout

 useEffect(() => { //act like componentDidMount()

        getInstitutes().then((response) => {
            if (response.errorCode !== null amp;amp; response.errorName !== null) {
                if (response.errorCode === 999) { //invalid token so... logout please.
                    props.history.push('/logout')
                } else {
                    setErrorMsg(response.errorName)
                    setErrorNum(response.errorCode)
                }
            } else {
                setInstitutesList(response.object)
            }
        }).catch((e) => {
            setErrorMsg("Error occur.")
        })
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []) 
 

На /logout —

 useEffect(() => {
    clearStorage();
    history.push("/login")
  })
 

clearStorage() функция:

 export const clearStorage =  () => {
        localStorage.removeItem("userid")
        localStorage.removeItem("authUser")
        localStorage.removeItem("token")
        localStorage.removeItem("permission")
    }
 

И затем я получаю эту ошибку, в которой говорится, что я нахожусь в бесконечном цикле, эта причина из localStorage -за того, что элементы вообще не удаляются, И это вызывает бесконечный цикл.

Я понятия не имею, почему элементы localStorage не удаляются таким образом,

когда я ввожу маршрут /logout вручную, он успешно удаляет элементы.

В чем моя ошибка?

Спасибо!

вы не забыли передать массив зависимостей в пути /выход из системы?

 useEffect(() => {
    clearStorage();
    history.push("/login")
}, []) // <--- here
 

С моей точки зрения, эта логика не должна быть частью компонента, она может быть внутри крючка аутентификации, из которого вы получаете блокировку, или она может быть внутри вашего компонента маршрута. Просто добавьте опору, которая определяет уровень доступа к этому маршруту и имеет там логику.

Ни в коем случае не должно быть частью самого компонента.