reactjs - 如何使用本地存储、react hooks 和 Context Provider 保持状态持久

Question

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

这是检查身份验证 token 的我的 protected 路由

<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="/" />;
  }

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

    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)
  })

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

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

Answer 1

您可以创建一个 Hook 来检查localstorage是否包含 token ，如果它不存在，则用户未通过身份验证，这样您就可以将他重定向到logIn，否则用户可以访问ProtectedRoutes。

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

protected 路由

假设您的组件登录是您希望在用户未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] = useState(false);

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

}

我已经使用了这种模式并且效果很好，我希望我可以分享主要思想，以便您可以在您的案例中实现它。