使用react-router处理firebase身份验证

npm install react-router-dom firebase

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import firebase from 'firebase/app';
import 'firebase/auth';

firebase.initializeApp({
  // 在这里填写你的Firebase配置
});

import React, { useEffect, useState } from 'react';
import { Redirect } from 'react-router-dom';
import firebase from 'firebase/app';

const AuthHandler = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
      setUser(user);
    });

    return () => {
      unsubscribe();
    };
  }, []);

  if (user === null) {
    // 用户还未完成身份验证，可以显示一个加载中的界面
    return <div>Loading...</div>;
  }

  if (user) {
    // 用户已登录，可以在这里进行相应的操作
    return <Redirect to="/dashboard" />;
  } else {
    // 用户未登录，可以重定向到登录页面
    return <Redirect to="/login" />;
  }
};

export default AuthHandler;

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import AuthHandler from './AuthHandler';
import Login from './Login';
import Dashboard from './Dashboard';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={AuthHandler} />
        <Route path="/login" component={Login} />
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
    </Router>
  );
};

export default App;