Question

我根据David East的视频设置了我的Firebase项目，如下所示在我的app.js文件中。我删除了配置参数。

#topName是指页面上显示经过身份验证的用户的用户名的元素。不幸的是，有人登录，或登录并进入页面，它最初显示访客，然后一段时间后切换到该用户的用户名。这很快（<500毫秒）但导致页面呈现两次令人困惑。

如何避免这种情况，我是否需要将内容存储在本地存储中？

    (function() { 

    //Initialise Firebase
    var config = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: ""
    };

    firebase.initializeApp(config);

    //Add a realtime listener.
    firebase.auth().onAuthStateChanged(firebaseUser => {
        if (firebaseUser) {
            console.log(firebaseUser);
            $('#topName').text(firebaseUser.email);
        }
        else
        {
            console.log('not logged in');
            $('#topName').text("Guest");
        }
    });




}());

Answer 1

这是正常现象，因为正在输入的数据被发送到Firebase服务器，然后您等待Firebase的响应检查此电子邮件是否经过身份验证。互联网连接也会影响到这一点。

在后台发生了很多事情，为了解决这个问题，可能会添加一个加载微调器窗口小部件，或尝试在本地存储凭据。

要解决此问题，您可以使用localStorage示例：

localStorage.setItem("lastname", "userx"); //store data

document.getElementById("result").innerHTML = localStorage.getItem("lastname") //to retrieve

有关详情，请查看：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

或者您可以使用sessionStorage，更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Answer 2

我用下一个代码解决了这个问题，只是在等待auth.onAuthStateChanged时显示一个加载程序组件，该变量具有三个值null，true和false。

const Routes = () => {
  const dispatch = useDispatch();

  // firebase observer for user auth
  useEffect(() => {
    let unsubscribeFromAuth = null;
    unsubscribeFromAuth = auth.onAuthStateChanged(user => {
      if (user) {
        dispatch(setCurrentUser(user));
      } else {
        dispatch(clearCurrentUser());
      }
    });
    return () => unsubscribeFromAuth();
  }, [dispatch]);

  return (
    <Switch>
      <Route exact path="/" component={Dashboard} />
      <Route path="/signin">
        <SignIn />
      </Route>
      <ProtectedRoute path="/protected">
        <Dashboard />
      </ProtectedRoute>
      <Route path="*">
        <NoMatch />
      </Route>
    </Switch>
  );
};

const ProtectedRoute = ({ children, ...rest }) => {
  const currentUser = useSelector(state => state.auth.currentUser);
  if (currentUser === null) {
    // handle the delay in firebase auth info if current user is null show a loader if is false user sign out
    // TODO create a loading nice component
    return <h1>Loading</h1>;
  }
  return (
    <Route
      // eslint-disable-next-line react/jsx-props-no-spreading
      {...rest}
      render={({ location }) =>
        currentUser ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: '/signin',
              state: { from: location }
            }}
          />
        )
      }
    />
  );
};

export default Routes;

Firebase身份验证 - 如何处理延迟

2 个答案: