基于React Hooks与Parse实现用户鉴权的最佳实践(useAuth)

// Hook (use-auth.js)
import React, { useState, useEffect, useContext, createContext } from 'react';
import Parse from 'parse/react-native';
import AsyncStorage from '@react-native-community/async-storage';

const setupParse = () => {
  Parse.initialize('your-app-id');
  Parse.serverURL = 'https://your-server-url/parse';
  Parse.setAsyncStorage(AsyncStorage);
};
setupParse();

const authContext = createContext();

// Provider component that wraps your app and makes auth object ...
// ... available to any child component that calls useAuth().
export function ProvideAuth({ children }) {
  const auth = useProvideAuth();
  return <authContext.Provider value={auth}>{children}</authContext.Provider>;
}

// Hook for child components to get the auth object ...
// ... and re-render when it changes.
export const useAuth = () => {
  return useContext(authContext);
};

// Provider hook that creates auth object and handles state
function useProvideAuth() {
  const [user, setUser] = useState(null);

  // Wrap any Parse methods we want to use making sure ...
  // ... to save the user to state.
  const signin = (username, password) => {
    return Parse.User
      .logIn(username, password)
      .then(currentUser => {
        setUser(currentUser);
        return currentUser;
      });
  };

  const signup = (username, email, password) => {
    return Parse.User
      .signUp(username, password, { email })
      .then(newUser => {
        setUser(newUser);
        return newUser;
      });
  };

  const signout = () => {
    return Parse.User
      .logOut()
      .then(() => setUser(false));
  };

  const sendPasswordResetEmail = email => {
    return Parse.User
      .requestPasswordReset(email)
      .then(() => {
        return true;
      });
  };

  const confirmPasswordReset = (code, password) => {
    return Parse.User
      .confirmPasswordReset(code, password)
      .then(() => {
        return true;
      });
  };

  // Subscribe to user on mount
  // Because this sets state in the callback it will cause any ...
  // ... component that utilizes this hook to re-render with the ...
  // ... latest auth object.
  useEffect(() => {
    Parse.User
      .currentAsync()
      .then(currentUser => {
        if (currentUser) {
          setUser(currentUser);
        } else {
          setUser(false);
        }
      });

    // Cleanup subscription on unmount
    // return () => unsubscribe();
  }, []);

  // Return the user object and auth methods
  return {
    user,
    signin,
    signup,
    signout,
    sendPasswordResetEmail,
    confirmPasswordReset,
  };
}

// Top level App component
import React from "react";
import { ProvideAuth } from "./use-auth.js";

const App = () => (
    <ProvideAuth>
      <AppNavigator />
    </ProvideAuth>
);

export default App;

// Any component that wants auth state
import React from "react";
import { useAuth } from "./use-auth.js";

function Navbar(props) {
  // Get auth state and re-render anytime it changes
  const auth = useAuth();

  return (
    <NavbarContainer>
      <Logo />
      <Menu>
        {auth.user ? (
          <Fragment>
            <Link to="/account">Account ({auth.user.email})</Link>
            <Button onClick={() => auth.signout()}>Signout</Button>
          </Fragment>
        ) : (
          <Link to="/signin">Signin</Link>
        )}
      </Menu>
    </NavbarContainer>
  );
}