Реагировать JS Как обрабатывать аутентификацию

Question

Я пытаюсь присоединиться к Backend (Express JS) и Frontend (React JS). Прямо сейчас я пытаюсь понять, как обрабатывать управление сессиями.

Когда пользователь входит в систему, используя форму, созданную с помощью React JS, бэкэнд возвращает маркер HS-256 JWT с информацией о пользователе в качестве полезной нагрузки.

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

Сейчас мой код входа выглядит так:

import React, { useEffect, useState } from 'react';
import { useCookies } from 'react-cookie';

export default () => {
    const [cookies, setCookie] = useCookies(['auth']);
    const [redirect, setRedirect] = useState(false);

    const handleSubmit = async e => {
        e.preventDefault();
        const response = await fetch('server/auth/login', options);
        const {token} = await response.json();
        setCookie('token', token, { path: '/' });
    };

    useEffect(() => {
        if (cookies.auth) {
            setRedirect(true);
        }
    }, [cookies]);

    if (redirect) {
        return <Redirect to="/admin" />;
    }

    return <form onSubmit={handleSubmit}>...</form>
};

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

Answer 1

Что вы хотели бы сделать - это сначала проверить, аутентифицирован ли пользователь, проверив токен в локальном хранилище / cook ie. Если это так, разрешите пользователю перейти к маршруту, который он посетил, если нет, перенаправьте его обратно на экран входа в систему (или экран ошибок). Обычно пользователи React используют библиотеки маршрутизации, такие как react-router-dom. По документации сайта они go рассказывают как go про аутентификацию. Счастливого кодирования https://reacttraining.com/react-router/web/example/auth-workflow

Answer 2

Просто храните токен в локальном хранилище и используйте в маршрутизаторе защищенные оболочки для маршрутов. Если токен не существует или срок его действия истек, верните редирект в Login. js.

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

Вот пример из моего приложения:

function PrivateRoute({ component: Component, ...rest }) {
  return (
    <AuthContext.Consumer>
      {auth => (
        <Route
          {...rest}
          render={props => {
          
            if (!auth.isAuthenticated()) return auth.login();
            
            return <Component auth={auth} {...props} />;
          }}
        />
      )}
    </AuthContext.Consumer>
  );
}

Answer 3

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