Как правильно создать аутентификацию?

Здравствуйте! Подскажите как правильно сделать аутентификацию?

У меня есть вот такой код. В хуке UseEffect вызывается verifyAuthentication, который обращается на сервер и там проверяется есть ли такой токен. Если есть, то переменная user не пустая, и соответственно вывожу что надо.

Но есть проблема, verifyAuthentication выполняется с задержкой из-за чего выводится компонент Authentication. тогда я сделал метод setAuth, который вызывает сам себя до тех пор, пока не появится переменная user (тоже неидеально). Вроде как работает, но возникает ситуация. Сначала грузится компонент Authentication, а потом Dashboard, и вроде бы ок, но часть js кода не грузится, например, кнопка, которая должна открыть модальное окно не сработает.
function App() {
    const {verifyAuthentication} = useActions()

    const [authStatus, setAuthStatus] = useState(false)

    useEffect(() => {
        if (localStorage.getItem('token')) {
            verifyAuthentication()
            setAuth(authStatus)
        }
    }, [])

    const setAuth = (bool: boolean) => {
        if (!bool) {
            let status = store.getState().auth.authResponse?.user ? true : false
            setTimeout(() => setAuth(status), 1000)
        }
        else {
            setAuthStatus(true)
        }
    }

    return authStatus ? <Dashboard/> : <Authentication/>
}

export default App;
  • Вопрос задан
  • 123 просмотра
Решения вопроса 1
rqdkmndh
@rqdkmndh
Web-разработчик
У вас масса проблем из-за того, что вы не до конца понимаете как работает хук useEffect. У вас есть ф-я verifyAuthentication() - которая содержит в себе запросы, а значит она асинхронная. Но вы вызываете её внутри хука useEffect не используя её асинхронные возможности (await или .then()). Вместо этого вы пишите костыли с setTimeout которые работают через раз.
Хотите перерисовать компонент под новые данные? У вас для этого есть целых 3 способа: передать новые данные в пропс, изменить стейт или использовать массив зависимостей в хуке useEffect - выбор под ваши нужды.
К сожалению, в доках к реакту не очень подробно все расписано, да и на др ресурсах на русском мне не попадались толковые объяснения. Вот пару ссылок на буржуйском по которым можно понять как работать в useEffect c асинхронным кодом и как использовать массив зависимостей в useEffect. Надеюсь, вам поможет подняться на новый уровень.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы