reactjs - 使用 React Context 中的使用效果检查本地存储中是否已有 token 的最佳方法

Question

美好的一天。这是检查我的 AuthContext 的本地存储中是否已经有 token 的最佳方法吗？我使用了一个 useEffect 钩子(Hook)来检查 token 是否已经存在。我是否应该更改 isAuthenticated 的初始状态，因为它在呈现时始终为 false？我不知道。谢谢

import React, { useState, useContext, useEffect } from "react";

const AuthContext = React.createContext();

export function useAuth() {
    return useContext(AuthContext);
}

export const AuthProvider = ({ children }) => {
    const [isAuthenticated, setAuthenticated] = useState(false);

    const login = () => {
        setAuthenticated(true);
    };

    useEffect(() => {
        const token = localStorage.getItem("AuthToken");
        if (token) {
            setAuthenticated(true);
        } else if (token === null) {
            setAuthenticated(false);
        }

        return () => {};
    }, []);

    return <AuthContext.Provider value={{ isAuthenticated, login }}>{children}</AuthContext.Provider>;
};

Answer 1

我建议使用状态初始化函数，这样你就有了正确的初始状态。您无需等到后续呈现周期才能获得正确的身份验证状态。

const [isAuthenticated, setAuthenticated] = useState(() => {
  const token = localStorage.getItem("AuthToken");
  return token !== null;
});

其余部分可能保持不变。

我建议您也提供一个默认上下文值。

const AuthContext = React.createContext({
  isAuthenticated: false,
  login: () => {},
});

export function useAuth() {
  return useContext(AuthContext);
}

export const AuthProvider = ({ children }) => {
  const [isAuthenticated, setAuthenticated] = useState(() => {
    const token = localStorage.getItem("AuthToken");
    return token !== null;
  });

  const login = () => setAuthenticated(true);
  
  return (
    <AuthContext.Provider value={{ isAuthenticated, login }}>
      {children}
    </AuthContext.Provider>
  );
};