為登錄用戶顯示不同的導航欄

Question

我已經在我的應用程序中創建了登錄/注冊，現在我想根據用戶登錄顯示不同的導航欄。 我不為這個項目使用 redux。

在全局的 App 組件中，我創建了 state 我想傳遞給孩子，然后基於它，顯示不同的數據，所以我創建了這樣的東西：

function App() {
  const [loginStatus, setLoginStatus] = useState();

  useEffect(() => {
    if(!loginStatus) {
      axios.get("http://localhost:5000/api/users/isUserAuth", {
        headers: {
          "x-access-token": localStorage.getItem("token")
        }
      }).then((response) => {
        console.log(response);
        setLoginStatus(true);
      })
    }}, [])

然后在我的導航欄中我創建了這樣的東西：

      <NavItem style={{display: loginStatus ? "block" : "none"}}>

這有效，但它會導致 loginStatus 每次頁面刷新，每條路由都被加載，所以當我 go 在用戶登錄時轉到不同的頁面時，它會在 NavItem 出現之前導致 0.5 秒的延遲，因為它會在每次刷新時向后端發出請求。

我如何存儲用戶登錄的信息，這樣就不必在每個頁面上進行 API 調用？

Answer 1

我認為您可以使用localStorage來存儲用戶登錄信息。

Answer 2

您需要使用本地存儲令牌初始化 state 並檢查該 state

const [loginStatus, setLoginStatus] = useState(token)