Как исправить троичный, если инструкция React Redirect основана на веб-токене

Question

Я пытаюсь проверить, есть ли токен в localalstorage, и если да, перейдите к компоненту Coorisponding, если его нет, я бы хотел, чтобы страница перешла на страницу входа.

Если я вручную изменю «authTokenhas === true» на «authTokenhas! == true», он будет работать правильно, поэтому, похоже, я неправильно структурирую оператор if?

import React from 'react';
import {
  Redirect,
  Route
} from 'react-router-dom';

var authTokenhas = localStorage.getItem('token');


const PrivateRoute = ({component: Component, ...rest}) => (

  <Route {...rest} render={(props) => (
    authTokenhas === true
    ? <Component {...props}/>
    : <Redirect to={{
      pathname: '/login',
      state: { from: props.location }
    }}/>
  )}/>
)

export default PrivateRoute;

Answer 1

Проблема существует, потому что вы сравниваете authTokenhas с истинным, используя строгое равенство (===) .'true' никогда не будет строго равно true.

Согласно документы , localStorage.getItem ВСЕГДА будут возвращать DOMString, что никогда не будет строгоравно истине.Вам следует либо преобразовать токен в логическое значение, либо отключить строгую проверку и использовать 0 или 1 (использование таких строк, как true или false, приведет к проблемам. (См. console.log(!!'false')).