Как реализовать аутентификацию в front-end с Redux? - PullRequest
Новая
       12

Как реализовать аутентификацию в front-end с Redux?

1 голос
/ 21 июня 2019

Я хочу знать процесс аутентификации на внешнем интерфейсе (как и где сохранить токены, как проверить, вошел ли пользователь в систему и т. Д.), Перенаправить на страницу входа, когда они пытаются получить доступ к страницам, на которых зарегистрирован входтребуется и т. д.

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

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

Что касается серверной части, мне в основном нужно установить некоторые расширения Django, и у меня будут конечные точки для вещейнапример: введите имя пользователя / пароль и верните токен доступа, истекайте токен доступа, зарегистрируйте пользователя, сбросьте пароль и т. д.

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

Важное примечание: я намерен использовать хуки вместо компонентов класса.

1 Ответ

1 голос
/ 22 июня 2019

краткое объяснение:

Я рекомендую вам использовать JWT для аутентификации, вы должны сохранить токен в localStorage

, когда вы входите / регистрируетесь, когда сервер отвечает на запрос jwt-token: 

localStorage.setItem('usertoken', token)

и затем вы должны проверить пользователя auth: 

const isAuth = localStorage.getItem('usertoken')

, если вы используете реагирующий маршрутизатор-4: 

if (!isAuth) {
  return <Router render={() => <Redirect to="/login" />}
}

// ...your protected routes

Также каждый запрос API должен содержать jwt-токен вФайл api.js: 

const apiResponse = await fetch(url, {
   ...someOptions,
   headers: { 'x-access-token': localStorage.getItem('usertoken') }
})

если сервер возвращает ответ 401, вы должны удалить токен: 

if (response.status === 401) {
    localStorage.removeItem('usertoken');

    window.location.href = '/login';
}

Альтернативный способ авторизации использовать куки

...