javascript - Meteor 的 Accounts.onEmailVerificationLink 与 React 和 React Router

Question

我正在尝试使用 Meteor 的帐户密码包进行电子邮件验证以与 React/Meteor 一起使用。我正在使用 React 路由器。我不确定放在哪里/如何调用它:

Accounts.onEmailVerificationLink(function(token, done) {
 Accounts.verifyEmail(token);
});

我有一个注册组件和容器，我正在尝试获取验证电子邮件以链接到登录组件/容器并进行验证。我在 Meteor.(isServer) Meteor.startup block 中完成了以下操作:

Accounts.urls.verifyEmail = function(){
 return Meteor.absoluteUrl("restaurantsignin");
};

我的 React 路由器文件如下所示:

Meteor.startup(() => {
  render(
    <Router history={browserHistory}>
      <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="/about" component={About} />
        <Route path="/restaurantsignin" component={RestaurantSignInContainer} />
        <Route path="/restaurantsignup" component={RestaurantSignUpContainer} />
        <Route path="/customersignup" component={CustomerSignUpContainer} />
        <Route path="/restaurantresetemail" component={RestaurantResetEmailContainer} />
        <Route path="/restaurantresetpassword" component={RestaurantResetPasswordContainer} />

        <Route path="/restaurant/:restaurantName" component={MenuPage} />
      </Route>
    </Router>, document.getElementById('app')
  );

});

我的 React 组件文件如下所示:

import React from 'react';
import Radium from 'radium';
import ReactDOM from 'react-dom';
import { Alert, Button } from 'react-bootstrap';

export default class RestaurantSignIn extends React.Component {

  handleAlertVerifiedDismiss() {
    document.getElementById('alert_verified_box').style.display = 'none';
  }

  render() {
    var styles = {
.
.
.
  return (
    <div style={styles.signInContainer}>
. 
.
.
and so on

电子邮件验证链接发送成功，并正确重定向到/restaurantsignin 链接。我只是不确定如何在用户到达登录页面后正确验证用户——我希望在他们登录之前验证他们(一旦他们单击链接)—— meteor 文档说使用上面的帐户代码片段但除此之外，我还没有在网上找到任何东西。非常感谢您的帮助!

Answer 1

Accounts.urls.verifyEmail 函数接受一个 token 参数，因此您可以执行以下操作:

Accounts.urls.verifyEmail = function(token) {
  return Meteor.absoluteUrl("restaurantsignin?token="+token)
}

然后用户点击电子邮件中的链接， token 已经在查询参数中，您可以使用 this.props.location.query.token 提取该参数。因此，在您的 RestaurantSignIn 组件的 componentWillMount 中，您可以调用:

Accounts.verifyEmail(this.props.location.query.token, function(error) {...})

如果没有错误，您可以使用 this.props.history.replace('/dashboard') 直接导航到经过身份验证的路由，因为 Accounts.verifEmail()自动让用户登录。