Question

我正在尝试使用React + Firebase实施身份验证。我想取得一个简单的结果。当用户未登录时，他在“欢迎”组件上通过“ /”路径看到“欢迎”。用户登录后，他会看到“欢迎使用username”。我实现了Login作为具有某些字段（名称，电子邮件）和signIn方法的受控组件。与注册组件相同。我无法弄清楚如何更好地实现可以接收道具的Welcome组件。我尝试将props传递给Welcome组件，但是它具有形式，因此无法传递给Route的组件prop，因此我出错了。我也看到了具有受保护路径的解决方案，但是我不需要未经身份验证的用户提供完全受保护的路径。我只想将用户数据从Login（firebase.auth（）。currentUser）传递给Welcome组件。您能否提出更好，现代或优雅的方式来实现这种流程？

import React, {Component} from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import Welcome from './Welcome';
import Login from './Login';
import Signup from './Signup';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Welcome} />
          <Route path="/login" component={Login} />
          <Route path="/register" component={Signup} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;

Answer 1

假设登录成功后正在使用用户的数据更新状态，则可以让您的Welcome组件根据状态中数据的存在性有条件地呈现两条不同的消息。

（伪代码）

if: no user data
return (<p>Welcome</p>);

if: user data exists
return (<p>Welcome John Smith</p>);

Answer 2

我已经开始使用React Context API来管理auth状态。我所见过的最好的教程在https://medium.freecodecamp.org/how-to-protect-your-routes-with-react-context-717670c4713a上。尽管有一些更简单的解决方案，但该解决方案具有很好的可扩展性，并支持很多灵活性。

反应路由器身份验证模式

2 个答案: