如何使用本地存储，React Hook和Context Provider保持状态持久性

2024-05-03 • 问答

我正在我的应用程序中实现身份验证，刷新时遇到的问题是状态不持久，因此我被重定向回登录屏幕。如何使用React Hooks检查local storage中是否有 authToken ，以保持刷新状态。

这是我的受保护路线，用于检查身份验证令牌

<Route
    {...rest}
    render={
        props=>
            authTokens ? (
                <Component {...props}/>
            ) : (
                <Redirect
                    to ={
                        {
                            pathname: '/login',state: {
                                from: props.location
                            }
                        }
                    }
                />

这是我的登录页面功能

 function Login(props) {
const [isLoggedIn,setLoggedIn] = useState(false);
const [isError,setIsError] = useState(false);
const [firstName,setusername] = useState("");
const [password,setPassword] = useState("");
const { setauthTokens } = useAuth();

function postLogin() {
    axios.post("http://10.6.254.22:5000/userinformation/login",{
      firstName,password
    }).then(result => {
      if (result.status === 200) {
        console.log('You have been logged in as user: ' +result.data[0].firstName)
        setauthTokens(result.data);
        setLoggedIn(true);
      } else {
        setIsError(true);
      }
    }).catch(e => {
      setIsError(true);
    });
  }


  if (isLoggedIn) {
    return <Redirect to="/" />;
  }

下面是我的钩子，其中包含状态

    const [authTokens,setauthTokens] = useState();

  const setTokens = (data) => {
    localStorage.setItem("authTokens",JSON.stringify(data));
    setauthTokens(data);
  }

  useEffect(()=> {
    let jsonToken = localStorage.getItem('authTokens',JSON.stringify(authTokens))
    console.log('JSON TOKEN  -----' + jsonToken)
    setauthTokens(jsonToken)
  })

如何在加载时使用local storage变量设置状态 authTokens ，以便在刷新状态时不会为空，这样我就不会在页面重新加载时注销。还要提及上下文提供程序的设置如下：

<AuthContext.Provider value={{ authTokens,setauthTokens: setTokens}}>
   <ProtectedRoute path="/" exact component={ProfileBox}/>
</AuthContext.Provider>

您可以创建一个钩子，以检查localstorage是否包含令牌，如果不存在，则该用户未被认证，因此您可以将他重定向到登录，否则用户可以访问ProtectedRoutes。

也许您可以在ProtectedRoute组件内重用 hook 并在那里处理它。

受保护的路线

可以说，如果用户不是auth，则组件登录是您要重定向的页面。并说您正在使用react-router或其他方法来处理路由和重定向。

const ProtectedRoute = ({component,...options}) => {
   const [isAuth ] = useAuth();
   let conditionalComponent = Login;
   if( isAuth ){
     conditionalComponent = component;
   }
   return <Route {...options} component={conditionalComponent} />
}

useAuth


const useAuth = () => {
 let [isAuth,handleAuthorized] = useStaet(false);

 useEffect( () => {
   if( checkLocalStorageToken() ){
    handleAuthorized( true );
   }  
   else {
    handleAuthorized(false)
   }
  return [ isAuth ]
 },[ checkLocalStorageToken() ]);

}

我已经习惯了这种模式，并且效果很好，希望我能分享主要思想，以便您可以在自己的情况下实现它。

问题是当组件装入时authTokens是undefined，因此受保护的路由的逻辑正在评估{{ 1}}代码的一部分，导致重定向到Redirect。

React会删除/login钩子，因此，我发现的针对此特定问题的解决方案是也检查componentWillMount中的令牌，而不仅仅是检查状态{{1} }。

通过这种方式，您的代码将能够评估您是否拥有令牌（甚至在第一次更新组件之前）。

您的localStorage的代码可能如下所示：

authTokens

其他可能的解决方案是：

使用上下文
使用Redux

但是我认为，如果您只是想保护私有路由，那么此解决方案就足够了

如何使用本地存储，React Hook和Context Provider保持状态持久性

baoqiwen123456 回答：如何使用本地存储，React Hook和Context Provider保持状态持久性

大家都在问