Если норматив не работает так, как должен [React hooks]

Question

Я работаю над простым сайтом с React Hooks. На этом веб-сайте я хочу защищать маршруты, если я не авторизован, веб-сайт должен перенаправить меня для входа в систему, в противном случае на путь, по которому я хочу получить доступ. У меня есть следующий код, где, независимо от статуса true или false, он всегда входит в оператор else. У меня вопрос, как это возможно, или я делаю что-то не так, что я не заметил?

import React from "react";
import { Route, Redirect } from "react-router-dom";
import Login from "../auth/Login";

function PrivateRoute({ component, ...options }) {
  let status = localStorage.getItem("isAuth");
  console.log("before if ", status);

  if (status === true) {
    console.log("if", status);

    return <Route {...options} component={component} />;
  } else {
    console.log("else", status);

    return <Route {...options} component={Login} />;
  }
}
export default PrivateRoute;

Answer 1

При сравнении status используется строгое равенство, равное ===, поэтому в вашем случае значение вашего статуса должно быть boolean. Но когда вы получаете его из localStorage, это строка. Помните, что === это не то же самое с ==

Во многих браузерах локальное хранилище может хранить только string. Поэтому, когда вы сохраняете логическое значение true или false, оно фактически сохраняет строки "true" или "false". Чтобы получить обратно действительные логические значения, вы можете использовать JSON.

. Или, в вашем случае, вы можете попробовать сравнить status === "true" и посмотреть, работает ли это.

Answer 2

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

  let status = localStorage.getItem("isAuth") === "true";