javascript 基于localStorage有条件地呈现组件

wkyowqbh 于 2023-03-11 发布在 Java

关注(0)|答案(1)|浏览(141)

这是我的代码，我尝试基于保存在localStorage中的令牌呈现我的屏幕容器div，我使用useState保存我的令牌，但当您注销或登录时需要刷新，我不知道如何在此处使用Effect基于localStorage重新呈现。我希望每当用户登录或注销时呈现我的应用程序组件。

function App() {
  const [isloggedIn, setIsLoggedIn] = useState(localStorage.getItem("token"));
return (
   
      <BrowserRouter>
        <Routes>
          <Route
            path="/login"
            element={<Login />}
          />
        </Routes>

        {isloggedIn && <div className="screens-container">
            <Sidebar />}
          <div className="screens-section-container">
            <Navbar />
            <Routes>
              <Route element={<PrivateRoutes />}>
                <Route
                  element={<Home />}
                  path="/"
                  exact
                />
              </Route>
            </Routes>
          </div>
        </div>}
      </BrowserRouter>
   
  );
}

JavaScript

来源：https://stackoverflow.com/questions/75415477/render-components-conditionally-base-on-localstorage

1条答案

按热度按时间

6ie5vjzr1#

isLoggedIn状态不会重新呈现，但仅在页面初始呈现时，它将查找token localStorage状态。
您需要更改状态本身，推荐的方法如下：

const App: FC<AppProps> = () => {
  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);

   const checkToken = () => {
     const token = localStorage.getItem("token");
     if (token) setIsLoggedIn(true);
     else {
       setIsLoggedIn(false);
     }
   };

   useEffect(() => {
     checkToken();
   }, []);

  const handleAuth = () => {
    const token = localStorage.getItem("token");
    if (token) {
      localStorage.removeItem("token");
      setIsLoggedIn(false);
    } else {
      localStorage.setItem("token", "123");
      setIsLoggedIn(true);
    }
  };

  return (
    <button onClick={handleAuth}>{isLoggedIn ? "Sign out" : "Login"}</button>
  );
};

export default App;

这样，在页面第一次呈现时，useEffect钩子将在组件挂载上运行，它将检查localStorage token状态并更改isLoggedIn状态，稍后如果我们从localStorage中删除token，isLoggedIn状态将相应更改。

注

在真实的世界的项目中，我们从来不这样处理身份验证，强烈推荐使用Redux和React Context这样的状态管理系统。

赞(0）回复(0）举报 2023-03-11

我来回答

javascript 基于localStorage有条件地呈现组件

1条答案

相关问题

热门标签

最新问答