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

Question

[Дамир Шаниязов]

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

У меня есть вот такой код. В хуке 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;

Comments

[Антон Горецкий]

а почему бы не сделать компонент Loader, и показывать его до момента успешной аутентификации ?

[Дамир Шаниязов]

Антон Горецкий, а как это решит проблему?

[Антон Горецкий]

вы сами написали, что проблема в том, что verifyAuthentication выполняется с задержкой из-за чего выводится компонент Authentication. На время задержки принудительно выводите компонент Loader.
Если аутентификация успешна - выводите что надо, не успешна - опять компонент Authentication.

[Nikolay Matyushkin]

Присоединяюсь к Антону
Вам нужно иметь два флага либо в локальном стейте, либо в менеджер стейте (redux, mobx)
isLoader: true
isError: false

если аутентификация норм, то меняем isLoader = false (это значит убираем лоадер и показываем нужный компонент)
если аутентификация не норм, значит isLoader = false и isError = true и выводим компонент Authentication. тут же можно нотификацию придумать для показа сообщения об ошибке или показывать какой-то компонент для ошибок.

а вообще я стараюсь такие вещи не решать в компоненте. логика подобная этой у меня обычно решается либо в миддлвеарах (сага), либо используются такие либы, как react-query. ну это так, моё имхо)

[Дамир Шаниязов]

Nikolay Matyushkin, Антон Горецкий, я использую redux-thunk, verifyAuthentication это action creator, который сначала ставить loading: true, затем идет запрос на сервер, после ответ сохраняется. Допустим я вызвал эту функцию и она выполняется.

Хорошо, я делаю проверку значений и вывожу, что мне необходимо. Но со временем данные поменяются и из-за этого необходимо выводить другой компонент. Как мне это сделать?

if (localStorage.getItem('token')) verifyAuthentication()

    if (store.getState().auth.loading && !store.getState().auth.authResponse?.user) return <Spinner/>

    if (!store.getState().auth.loading && store.getState().auth.authResponse.user) return <Dashboard/>

    if (!store.getState().auth.loading && !store.getState().auth.authResponse) return <Authentication/>

Answer 1

[Антон Горецкий]

У вас масса проблем из-за того, что вы не до конца понимаете как работает хук useEffect. У вас есть ф-я verifyAuthentication() - которая содержит в себе запросы, а значит она асинхронная. Но вы вызываете её внутри хука useEffect не используя её асинхронные возможности (await или .then()). Вместо этого вы пишите костыли с setTimeout которые работают через раз.
Хотите перерисовать компонент под новые данные? У вас для этого есть целых 3 способа: передать новые данные в пропс, изменить стейт или использовать массив зависимостей в хуке useEffect - выбор под ваши нужды.
К сожалению, в доках к реакту не очень подробно все расписано, да и на др ресурсах на русском мне не попадались толковые объяснения. Вот пару ссылок на буржуйском по которым можно понять как работать в useEffect c асинхронным кодом и как использовать массив зависимостей в useEffect. Надеюсь, вам поможет подняться на новый уровень.

Comments

[Дамир Шаниязов]

Спасибо большое, всегда думал что useEffect выполняется до рендера + надо было использовать не store.getState, а useSelector. Но проблема с тем, что event listener не вешается, остается актуальной