使用 React Context 中的使用效果检查本地存储中是不是已经存在令牌的最佳方法

Posted 2023-04-14

【中文标题】使用 React Context 中的使用效果检查本地存储中是不是已经存在令牌的最佳方法

【英文标题】：Best way to check if there is already a token in local storage using use effect in React Context使用 React Context 中的使用效果检查本地存储中是否已经存在令牌的最佳方法

【发布时间】：2021-05-03 05:58:10

【问题描述】：

美好的一天。这是检查 AuthContext 的本地存储中是否已经存在令牌的最佳方法吗？我使用了一个 useEffect 挂钩来检查令牌是否已经存在。我是否应该更改 isAuthenticated 的初始状态，因为它在呈现时总是错误的？我不知道。谢谢

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>;
;

【参考方案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>
  );
;

【讨论】：

你好 Drew Reese， useState 中的函数听起来是实现检查用户是否已登录的完美方法。所以我不必使用 useEffect 钩子对吗？谢谢你:)

@Nevertheless Affirmative，就是这个想法。如果这对您有用并解决了您的问题，那么我邀请您也请接受此答案，如果您发现它有帮助，请也投赞成票（如果您还没有）。干杯。