设置 isLoggedIn true 或 false

Question

目前，当我登录或注销时，我的内容是隐藏的。 我希望我的内容在登录时显示，但在注销时隐藏。 我想写一个三元组并设置一个 true 或 false 的标记来确定用户是否会看到或不会看到我的内容。

如果有人能以清晰简单的方式向我展示如何解决这个问题，那就太好了。 我如何根据用户是否登录来在此处呈现 true 或 false？

Answer 1

这是一个如何根据 state 显示内容的简单示例：

import React, { useState } from 'react';

function MyComponent() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? <div>Content that is visible when logged in</div> : null}
    </div>
  );
}

export default MyComponent;

Answer 2

为用户登录时，如果登录操作成功，将access token保存到localstorage。

const user = localStorage.setItem('token', res.data.access);

那么你需要检查的地方

if(localStorage.getItem('token') !== undefined) { --你想隐藏的部分 }

注意：如果您从 JWT 获得了其他用户数据。（user_name、user_id、图像、权限..）这不是最佳做法。 如果您的项目很大并且您需要我上面提到的信息。 您必须先解码 JWT，然后创建 localstorageta 用户。