使用 Firebase 身份验证检查反应路由器保护的路由 [英] React router protected route with firebase auth check

问题描述

我想实施受保护的路由，并使用 firebase 进行身份验证.我的浏览器被这段代码冻结了:

const 应用程序:React.FC = () =>{const [身份验证，setAuthState] = useState({认证:假，初始化:真});firebase.auth().onAuthStateChanged(user => {如果(用户){设置验证状态({已验证:真实，初始化:假});} 别的 {设置验证状态({认证:假，初始化:假});}});如果(身份验证.初始化){返回<div>加载</div>;}返回 (<路由器><div><开关><路由精确路径="/login" component={Login}/><私人路线路径=/"组件={首页}已认证={authentication.authenticated}/><私人路线路径=/加入"组件={加入}已认证={authentication.authenticated}/><私人路线路径=/创建"组件={创建}认证={authentication.authenticated}/></开关>

</路由器>);};

我是 React 新手，这是我第一次使用 React 钩子，但这里有什么问题?

解决方案

我认为就像 iHowell 在评论中解释的那样，firebase auth ... 是一个副作用，所以你必须使用 useEffect hook.

const 应用程序:React.FC = () =>{const [身份验证，setAuthState] = useState({认证:假，初始化:真});React.useEffect(() => firebase.auth().onAuthStateChanged(user => {如果(用户){设置验证状态({已验证:真实，初始化:假});} 别的 {设置验证状态({认证:假，初始化:假});}}), [setAuthState]);如果(身份验证.初始化){返回<div>加载</div>;}返回 (<路由器><div><开关><路由精确路径=/login";组件={登录}/><私人路线路径=/"组件={首页}已认证={authentication.authenticated}/><私人路线路径=/加入"组件={加入}已认证={authentication.authenticated}/><私人路线路径=/创建"组件={创建}已认证={authentication.authenticated}/></开关>

</路由器>);};

I want to implement protected routes and I use firebase for authentication. My browser freezes with this piece of code:

const App: React.FC = () => {
  const [authentication, setAuthState] = useState({
    authenticated: false,
    initializing: true
  });

  firebase.auth().onAuthStateChanged(user => {
    if (user) {
      setAuthState({
        authenticated: true,
        initializing: false
      });
    } else {
      setAuthState({
        authenticated: false,
        initializing: false
      });
    }
  });

  if (authentication.initializing) {
    return <div>Loading</div>;
  }
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/login" component={Login} />
          <PrivateRoute
            path="/"
            component={Home}
            authenticated={authentication.authenticated}
          />
          <PrivateRoute
            path="/join"
            component={Join}
            authenticated={authentication.authenticated}
          />
          <PrivateRoute
            path="/create"
            component={Create}
            authenticated={authentication.authenticated}
          />
        </Switch>
      </div>
    </Router>
  );
};

I'm a React newbie and this is my first time with React hooks but what's wrong here ?

解决方案

I think that like iHowell explain in the comment, the firebase auth ... is a side effect, so you have to use the useEffect hook.

const App: React.FC = () => {
  const [authentication, setAuthState] = useState({
    authenticated: false,
    initializing: true
  });

  React.useEffect(() => firebase.auth().onAuthStateChanged(user => {
    if (user) {
      setAuthState({
        authenticated: true,
        initializing: false
      });
    } else {
      setAuthState({
        authenticated: false,
        initializing: false
      });
    }
  }), [setAuthState]);

  if (authentication.initializing) {
    return <div>Loading</div>;
  }
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/login" component={Login} />
          <PrivateRoute
            path="/"
            component={Home}
            authenticated={authentication.authenticated}
          />
          <PrivateRoute
            path="/join"
            component={Join}
            authenticated={authentication.authenticated}
          />
          <PrivateRoute
            path="/create"
            component={Create}
            authenticated={authentication.authenticated}
          />
        </Switch>
      </div>
    </Router>
  );
};

这篇关于使用 Firebase 身份验证检查反应路由器保护的路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！