Реагировать: Встроенный, если не разрешается в ложь, когда значение «неопределено»

Question

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

В настоящее время я изучаю React + Redux и у меня есть довольно простой фрагмент кода:

const AuthRoute = ({ component: Component, ...rest }) => {
  console.log(localStorage.getItem('user')); //undefined
  return (
    <Route {...rest} render={props => (
      localStorage.getItem('user') ?
        <Component {...props} /> :
        <Redirect to={{ pathname: '/login' }} />
    )} />
  )
}

Когда этот код выполняется, я ' Ожидается, что неаутентифицированный пользователь будет перенаправлен на страницу login . Однако по какой-то причине встроенная проверка if для localStorage.getItem('user'), которая разрешается до undefined, не дает ожидаемого результата.

Кроме того, я также пробовал !!localStorage.getItem('user'), который также не не принимает значение false и не перенаправляет на ожидаемую страницу.

Однако localStorage.getItem('user') !== 'undefined' работает как шарм.

Что мне здесь не хватает?

Спасибо

РЕДАКТИРОВАТЬ:

Условие localStorage.getItem('user') === undefined работает нормально, но почему localStorage.getItem('user') не разрешает ложь if сам результат?

Содержимое localStorage:

Storage {darkyMode: "1", darkyState: "f", user: "undefined", darkySupported: "t", length: 4}
length: 4
darkyMode: "1"
darkyState: "f"
user: "undefined"
darkySupported: "t"
__proto__: Storage

ЗАКЛЮЧИТЕЛЬНОЕ РЕДАКТИРОВАНИЕ:

Поэтому, прежде чем добавлять код в plunker для просмотра вами, ребята, я добавил еще несколько входов в свое приложение, чтобы убедиться, что я определенно не упустил что-то очевидное и, как всегда, было что-то очевидное ...

У меня был этот кусок кода в моем сервисе пользователя:

return axios.post(`${api}/users/login`, {email, password})
    .then(res => onSuccess(res.data))
    .catch(err => console.log(err));
    .finally(user => localStorage.setItem('user', JSON.stringify(user))

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

Ранее, в методе onSuccess я только возвращал данные, теперь я выполняю дополнительные проверки данных и действуя в соответствии с этим, перемещение localStorage.setItem('user', JSON.stringify(user)) из .finally в onSuccess метод решило проблему.

Пометка ответа @Christian Fritz как правильного.

Спасибо всем за помощь! :)

Answer 1

В опасности указать очевидное, ваше хранилище содержит user: "undefined", то есть строку, так что да, конечно, localStorage.getItem('user') !== 'undefined' будет работать и !localStorage.getItem('user') не будет.

Я подозреваю что вы проверяете для вышедшего из строя дела неправильно. Убедитесь, что вы используете

localStorage.removeItem('user');

и , а не localStorage.setItem('user', undefined). Легко проверить, что это не работает так, как можно было ожидать:

> localStorage.setItem('user', undefined)
undefined
> localStorage.getItem('user')
"undefined"

Answer 2

В вашем localStorage есть ключ user со значением undefined, который является строкой. Учитывая это, вы должны использовать localStorage.getItem('user') !== 'undefined', так как 'undefined' не разрешается как false. Другой способ - вы можете removeItem () при запуске приложения / пользователь выходит из системы