Реагирует на аутентификацию с помощью localStorage

#reactjs #authentication #timing

#reactjs #аутентификация #время

Вопрос:

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

     async function login(username, password) {
         const response = await axios.post(API_URL   "signin", {
            username,
            password
          });
    
          if (response.data.accessToken amp;amp; typeof window !== 'undefined') {
            localStorage.setItem("user", JSON.stringify(response.data));
         }
          
        return response.data;
 }
  

Комментарии:

1. зачем нам нужна эта строка -> typeof window !== 'undefined'

Ответ №1:

Можете ли вы попробовать это, если это работает или нет?

     async login(username, password) {
        axios.post(API_URL   "signin", {
            username, password
        })
            .then(response => {
                if (response.data.accessToken amp;amp; typeof window !== 'undefined') {
                    localStorage.setItem("user", JSON.stringify(response.data));
                }
            })
        return response.data;
    }
  

Комментарии:

1. Можете ли вы поделиться сокращенным выводом ответа?

2. codesandbox.io/s/peaceful-fermat-ybrl7?file=/src/authService.js надеюсь, это поможет

Ответ №2:

Трудно сказать определенно, не видя точной ошибки, которую вы получаете, но что кажется мне проблематичным response.data.accessToken , так это то, что если вы попытаетесь получить доступ к accessToken свойству data when data is null или undefined , это вызовет ошибку.

Я предлагаю вам добавить проверку, чтобы убедиться, что response.data это правдиво, прежде чем обращаться к accessToken свойству. Например,

 if(response.data amp;amp; response.data.accessToken amp;amp; ...) {
  

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

Комментарии:

1. Привет, ошибка, с которой я сталкиваюсь, заключается в следующем (ошибка типа: не удается прочитать свойство ‘name’ из null) Я думаю, проблема в том, что setItem замедляется, проблема с синхронизацией (на самом деле это еще не новинка)

2. Спасибо за разъяснение. Не могли бы вы вставить часть вашего кода, связанную с входом в систему, где вы пытаетесь получить доступ к name атрибуту объекта? ( <object>.name ) Это было бы очень полезно увидеть на основе ошибки, которую вы получаете.

3. Я добавил форму SIGN в песочницу codesandbox.io/s/peaceful-fermat-ybrl7?file=/src/loginForm.js

4. Ошибка исчезает, когда я перезагружаю страницу и перехожу на следующую страницу, не знаю, помогает ли это

Ответ №3:

проблема заключалась в том, что при загрузке username локальное хранилище еще не было установлено, поэтому система ответила undefined , чтобы исправить проблему, просто установите оператор if, в котором говорится, что жаба usersDetails при наличии