如果语句不能正常工作 [React hooks]

Question

我正在使用 React Hooks 开发一个简单的网站。在该网站上，我想保护路由，如果我未获得授权，该网站应将我重定向到登录，否则转到我想要访问的路径。我有以下代码，无论状态是真还是假，它总是进入 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的方式是使用严格相等===&nbsp;因此，在您的情况下，它要求您的状态值必须为&nbsp;boolean&nbsp;。但是当你从 localStorage 获取它时，它是一个字符串。请记住===&nbsp;与不一样==在许多浏览器中，本地存储只能存储string。因此，当您存储布尔值&nbsp;true&nbsp;或&nbsp;false&nbsp;时，它实际上存储字符串&nbsp;"true"&nbsp;或&nbsp;"false"&nbsp;。为了取回真正的布尔值，您可以使用 JSON。或者就您的情况而言，您可以尝试比较status === "true"，看看是否有效。

Answer 2

当您从本地存储获取一些值时，它是一个字符串，因此使用它如下：&nbsp;&nbsp;let&nbsp;status&nbsp;=&nbsp;localStorage.getItem("isAuth")&nbsp;===&nbsp;"true";