Meteor's Accounts.onEmailVerificationLink与React和React路由器

Meteor's Accounts.onEmailVerificationLink with React and React Router

本文关键字：React 路由器 onEmailVerificationLink Accounts Meteor      更新时间：2023-09-26

我正在尝试使用Meteor的帐户密码包进行电子邮件验证以使用React/Meter。我正在使用React Router。我不知道该放在哪里/如何称呼这个：

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

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

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链接。我只是不知道一旦用户到达登录页面，如何正确验证他们——我希望在他们登录之前（一旦他们点击链接）对他们进行验证——流星文档说要使用上面的账户代码片段，但除此之外，我在网上还没有找到任何东西。非常感谢你的帮助！

Accounts.urls.verifyEmail函数接受一个令牌参数，因此可以执行以下操作：

Accounts.urls.verifyEmail = function(token) {
  return Meteor.absoluteUrl("restaurantsignin?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()会自动将用户登录。

相关文章：