Как пройти аутентификацию с помощью JWT в reactjs, хранящемся в localstorage на странице refre sh?

Question

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

я хочу обновить свое состояние при обновлении sh страницы. дайте знать решение. весь мой проект - https://codesandbox.io/s/react-library-fe-7p8rf

Answer 1

Проблема в вашем коде заключается в том, что вы не сохранили userData, как для jwt, поэтому if (user.isLoggedIn) { в вашем UserComponent всегда будет давать false после refre sh, попробуйте установить данные пользователя на localstorage в вашем Login компоненте

localStorage.setItem("currentUser", JSON.stringify(res.user));

И в вашем userContext обновите ваше initialState:

const initialState = {
   isLoggedIn: localStorage.getItem("jwt") ? true : false,
   userData: localStorage.getItem("currentUser")
       ? JSON.parse(localStorage.getItem("currentUser"))
       : "undefined"
};

Вы также можете попытаться проанализировать токен jwt, чтобы извлечь данные пользователя (данные могут быть не тем же объектом userData, который вы хотите):

const token = localStorage.getItem("jwt");
const userData = JSON.parse(atob(token.split(".")[1]));

Даже со всем этим вы должны создать веб-сервис для проверки / refre sh вашего jwt, потому что после истечения срока действия вашего токена вы не можете получить никакого ответа от любой веб-сервис.

Answer 2

Вы можете обновить свое состояние таким образом, когда пользователь обновил страницу:

// UserContext.js

case "SET_USER":
      return { ...state, isLoggedIn: localStorage.getItem("jwt") ? true : false };

Answer 3

получить учетные данные для входа в useEffect и установить для данных loginUser свое состояние

useEffect(() => { let loginUser= window.localStorage.setItem("jwt", res.jwt); });

Answer 4

У меня был тот же вопрос, вот что я сделал:

1. Я создал маршрут на моем сервере api, который проверяет токен и возвращает объект пользователя, например: /auth/validate
2. Я создал действие с именем validateToken в моем приложении для реагирования, на этом маршруте я получаю токен из localstorage и отправляю его на сервер /auth/validate и сохраняю возвращенного пользователя с сервера в моем состоянии.
3. В компоненте приложения i Я вызываю эту функцию в useEffect() из componentDidMount()

Таким образом, после перезагрузки страницы приложение отправит запрос на сервер с токеном jwt из localstorage, и сервер вернет объект пользователя. Вы также можете показать загрузчик, пока он отправляет запрос :)