使用 react + react-router 处理来自 firebase URL 的传入查询参数

Question

我正在尝试使用 Firebase 将 email/pw 身份验证与电子邮件验证联系起来。我正在使用 React + Redux + React-Router。帐户创建进展顺利 - 用户帐户是在 Firebase 用户数据库中创建的，但我遇到的问题是试图从 link 中捕获 "mode" 和 "oobCode" Firebase 在其电子邮件验证中提供（URL 格式为 .../verify?mode=foo&oobCode=bar）。我有 Firebase linking（暂时）到 localhost:3000/验证，所以在我的路线中，我尝试添加这样的路线路径：

<Router history={ browserHistory }>
        <Route path="/" component={ MainApp }>
            <IndexRoute component={ LandingPage } onEnter={ redirectIfLoggedIn } />
            <Route path="verify/:mode/:oobCode" component={ LandingPage } onEnter={ redirectIfVerified } />
            // other routes
        </Route>
</Router>

但是，当我单击电子邮件中的 URL 时，出现错误页面。本质上，我要做的就是拦截传入的电子邮件 link，使用 Firebase 的 applyActionCode 检查模式和 oobCode 是否正确，然后将用户发送到主登录页面或错误页。知道我在这里缺少什么吗？

Answer 1

您收到的url格式是.../verify?mode=foo&oobCode=bar。

路线应该是这样的 -

...
  <Route path="verify" component={ LandingPage } onEnter={redirectIfVerified } />
...

mode 和 oobCode 是查询参数。您可以从注入道具的位置对象中获取组件中的这些值。

this.props.location.query = {mode: "foo", oobCode: "bar"}

使用 react + react-router 处理来自 firebase URL 的传入查询参数

Handle incoming query params from firebase URL using react + react-router

firebase

reactjs

react-router

firebase-authentication

react-redux