reactjs - 正确登录后如何重定向用户？

Question

我正在构建一个使用 React 和 Firebase 的应用程序。我创建了一个登录组件，在用户登录并将用户重定向到主页后，它将状态“isLoggedIn”设置为 true。问题是state默认是false然后需要时间去设置，所以当你刷新主页面的时候，你可以短暂的看到登录页面。我是否更改我的路由器重定向代码或设置不同的状态？

这是我的代码:

 const [isLoggedIn, setIsLoggedIn] = useState(false)

 onAuthStateChanged(auth,  (currentUser) => {
    setIsLoggedIn(currentUser)
})

return (
    <Router>
        {isLoggedIn ? <Redirect to="/home" /> : <Redirect to="/login" />}
        <Route path="/home" component={SongList} />
        <Route path="/login" component={Auth} />
    </Router>
)

Answer 1

在 react-router-dom v5 中，常见的模式是创建一个自定义路由组件来处理身份验证状态，即使它处于挂起状态。创建一个从不确定状态开始的 AuthRoute 组件，并且在您获得身份验证确认之前不呈现路由的组件或重定向。

例子:

const AuthRoute = props => {
  const location = useLocation();

  const [isLoggedIn, setIsLoggedIn] = useState(); // <-- neither true nor false

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth,  (currentUser) => {
      setIsLoggedIn(currentUser); // sets user object or null
    });

    return unsubscribe; // <-- cleanup auth subscription!
  }, []);

  if (isLoggedIn === undefined) return null; // <-- or loading indicator, etc...
  
  return isLoggedIn ? (
    <Route {...props} />
  ) : (
    <Redirect
      to={{
        pathname: "/login",
        state: { location }, // <-- pass current location
      }}
    />
  );
};

用法:

<Router>
  <Switch> // <-- match & render a single route
    <AuthRoute path="/home" component={SongList} />
    <Route path="/login" component={Auth} />
  </Switch>
</Router>

在 Auth 组件中，从路由状态访问传递的 location，在成功登录后，您可以将用户重定向回他们最初尝试访问的路由。

const { state } = useLocation();
const history = useHistory();

...

// successful login, redirect back to route, or home if undefined
history.replace(state.location?.pathname ?? "/home")

让 PrivateRoute 的每个“实例”保持其自己的状态，尽管您将进行大量的身份验证检查。从这里开始，您可能想要实现一个 AuthProvider React 上下文组件，它存储 isLoggedIn 状态，并且每个 PrivateRoute 组件都订阅上下文值。这样，在用户登录后，应用程序可以保持此状态，而无需在每次访问 protected 路由时重新检查/获取它。