Meteor/React:将组件外部重定向为AccountsTemplates.logout()的回调

Question

我正在尝试在我的Meteor应用程序中集成meteor-useraccounts包和React。我已经取得了很大的进步，但我很难实现一个history.push()或等效于AccountsTemplate.logout()的回调函数-后者是以注销用户的方式构建的。

回调函数的配置是这样完成的：

AccountsTemplates.configure({
    onLogoutHook: myLogoutFunc
})

但我不能在React.Component的“类”内这样做。因此，我需要定义使用浏览器历史记录的回调函数，但我猜它在任何组件范围之外。

对于按下登录/退出按钮的情况，我找到了如下解决方案：

class LogInOutButton extends Component {
    constructor(props) {
        super(props);

        this.state = {
            loggedIn: Meteor.userId() ? true : false,
            redirect: false
        }

        this.redirectToSignIn = this.redirectToSignIn.bind(this);

        window.logInOutButton = this;
    }

    redirectToSignIn() {
        if (!this.state.loggedIn && document.location.pathname !== "/signIn")
            this.setState({redirect: <Redirect to="/signIn" />});
    }

    render() {
        const { redirect } = this.state
        return (
            <li className="nav-item">
                {redirect}
                <a className="nav-link" href="#"
                    onClick={Meteor.userId() ? AccountsTemplates.logout : this.redirectToSignIn}>
                    {Meteor.userId() ? "Sign Out" : "Sign In"}
                </a>
            </li>
        )
    }
}

例如，如您所见，我尝试从外部调用redirectToSignIn()方法，使其成为全局window对象的成员。感觉不对，也不起作用：

var myLogoutFunc = () =>
    window.logInOutButton.redirectToSignIn();

我还尝试了以下方法：

var myLogoutFunc = withRouter(({history}) => 
    <div onLoad={history.push="/signIn"}>
    </div>
) 

但是，这是行不通的，因为如果我做对了，withRouter需要一个param组件。至少，这就是我试图解释以下错误的方式：

Exception in delivering result of invoking 'logout': TypeError: "props is undefined"

在withRouter模块中阅读了这些内容之后：

var withRouter = function withRouter(Component) {
  var C = function C(props) {
     ...

你怎么解决这个问题？

Answer 1

您只是尝试将用户重定向到登陆页面时，他们注销，注销，或当他们来到应用程序/网站时，而不是登录？根据我的应用程序/路由/权限/等等的复杂性，我经常这样做几种不同的方式。

我倾向于使用铁:路由器和火焰，而不是反应，但我认为最直接的解决方案是容易翻译。我把它放在客户端代码的顶层：

Tracker.autorun(function() {
    const userDoc = Meteor.user();
    const loggingIn = Meteor.loggingIn();

    if(!userDoc && !loggingIn) {
        Router.go('/'); // Or comparable redirect command
    }
});

页面加载:如果没有定义userDoc (意味着用户没有成功登录)而loggingIn不是真(意味着Meteor没有在页面加载中登录用户)，那么我们将将用户重定向到主页。

注销时:由于userDoc和loggingIn都是反应性数据源，因此该autorun函数在任何一个变量更改时都会重新运行。因此，当用户以任何方式注销时，userDoc将停止定义，条件将解析为true，并将用户重定向到主页。

登录:如果登录用户登录或开始登录，则不会发生任何情况。函数将重新运行，但是在userDoc或loggingIn变量更改时强制自动重定向可能变得更加复杂。

Answer 2

老实说，我放弃了使用包为帐户系统创建UI的想法。

meteor-useraccounts包是为Blaze制作的，虽然在官方的Meteor文档中，它们鼓励将{{> atForm }}模板包装起来，从而将用于登录、注册等的表单呈现为React.Component，但我发现它会导致不兼容，特别是在处理路线时。(我曾使用包gadicc:blaze-react-component包装。)最后，我发现自己试图理解这个黑匣子，它是由多个层组成的，包括。另一个为bootstrap4预定型。例如，我也无法使电子邮件验证工作。

因此，我决定将其全部转储，并开始在Meteor 账号和Meteor 密码API之上构建完整的UI和逻辑。

现在重定向非常简单，因为我可以在我自己的React.Component中完成它。您需要做的唯一事情是import { withRouter } from 'react-router';，然后是export default withRouter(LogInOutButton);，最后您可以使用this.props.history.push("/signIn")重定向：

import React, { Component } from 'react';
import { withRouter } from 'react-router';

class LogInOutButton extends Component {
    constructor(props) {
        super(props);

        this.state = {
            loggedIn: Meteor.userId() ? true : false,
        }

        this.redirectToSignIn = this.redirectToSignIn.bind(this);
    }

    redirectToSignIn() {
        if (this.state.loggedIn)
            Meteor.logout()
        if (document.location.pathname !== "/signIn")
            this.props.history.push("/signIn")
    }

    render() {
        return (
            <li className="nav-item">
                <a className="nav-link" href="#"
                    onClick={this.redirectToSignIn}>
                    {Meteor.userId() ? "Sign Out" : "Sign In"}
                </a>
            </li>
        )
    }
}

export default withRouter(LogInOutButton);

PS: (只是我的观点)，当然，在为帐户系统构建自己的UI/逻辑时，还有一些问题要解决。例如，表单验证。(我决定在HTML5验证的基础上构建，但使用bootstrap4添加自己的视觉反馈。)

我想，就Meteor，和的反应而言，目前根本没有工作包。我都试过了相信我。他们都是一个痛苦的屁股(当试图集成他们与反应)或不够定制。如果我从一开始就花时间建造自己的房子，我早就完成了。而你自己做这件事的好处是，你知道它是如何工作的，并且可以很容易地在以后对它进行细化和重用。

它还有助于保持低依赖度，我认为这是至关重要的，因为Meteor项目在过去几年中一直在快速发展和变化。当你知道你做了什么的时候，保持你的项目的最新更新就更容易了。