Blaze LoginButtons模板在React中呈现 – login只能在主页上运行

所以我使用Meteor / React，但为了方便，我使用了Blaze的login模板。 它在主页上效果很好，但是当我尝试从网站上的任何其他页面login时，页面重新加载并且login看起来不成功。

这是我的实现。

AccountsUI.jsx

import React, {Component} from 'react'; import ReactDOM from 'react-dom'; export class AccountsUI extends React.Component { componentDidMount(){ this.view = Blaze.render(Template.loginButtons, this.refs.loginContainer); } componentWillUnmount(){ Blaze.remove(this.view); } render(){ return( <span ref="loginContainer" /> ) } } 

mainLayout.jsx

  <div className="container-fluid"> <a className="navbar-btn pull-left panel-body"><b>FAQ</b></a> <a className="navbar-btn pull-right panel-body"><b>Category</b></a> <a className="navbar-btn pull-right panel-body"><b>Notifications</b></a> <a className="navbar-btn pull-right panel-body"><b><AccountsUI /></b></a> </div> </div> 

为什么这只能在某些页面上工作？

Answer 1

火焰

你的代码看起来不错，你是否正确导入所有组件？

试试： https ： //atmospherejs.com/gadicc/blaze-react-component

并做：

 import Blaze from 'meteor/gadicc:blaze-react-component'; .... <a className="navbar-btn pull-right panel-body"><b><Blaze template="loginButtons" /></b></a> .... 

没有太多的尝试改变你对工具的select，我一直在探索React，Meteor和Authentication，经常陷入状态pipe理和其他黑洞。 以下是我探索的一些选项的概述：

---

我在哪里

看看我的回购： https ： //github.com/atapp/apollo-redux-meteor-userdemo

这是实现授权逻辑的一种方式，一旦你进入React Meteor世界，从我的经验来看，Redux是一个不容易的事情。 检查出来，如果你有兴趣，我可以给你更多的信息。

---

React Accounts-UI软件包

个人作为一个快速工具，我是React Accounts-UI软件包的忠实粉丝https://atmospherejs.com/std/accounts-ui

这很容易实现，并有许多React特定的configuration选项。

通过https://github.com/studiointeract/accounts-ui/blob/master/README.md查看“创build自己的风格版本”以在Navbar中实现

---

与Kadira FlowRouter和ReactLayout进行反应

对于Navbar内的东西，这里是一个stream动路由器的刺。

从meteor指南用户/authentication部分：

虽然路由器是可选的，并且基本function在没有它的情况下也能正常工作，但select路由器集成也是一个好主意：

对于Navbarlogin（Not React Accounts-UI）。

你需要Flowrouter和Reactlayout

路线

我们创build了2个路由组 ，允许我们轻松地将身份validation逻辑构build到Flow路由器中：

 const publicRoutes = FlowRouter.group( { name: 'public' } ); publicRoutes.route( '/login', { name: 'login', action() { ReactLayout.render( App, { yield: <Login /> } ); } } ); const authenticatedRoutes = FlowRouter.group( { name: 'authenticated' } ); authenticatedRoutes.route( '/hidden', { name: 'hidden', action() { ReactLayout.render( App, { yield: <Hidden /> } ); } } ); 

应用程序：

你可以修改这个来适应你自己的设置。 这里的方法是获取reactmeteordata混合，这允许我们testing用户是否login或login。isPublic函数允许我们testing用户是否应该被允许在当前路由上。 其余的应该是自我解释的。

 App = React.createClass({ mixins: [ ReactMeteorData ], getMeteorData() { return { loggingIn: Meteor.loggingIn(), hasUser: !!Meteor.user(), isPublic( route ) { let publicRoutes = [ 'login' ]; return publicRoutes.indexOf( route ) > -1; }, canView() { return this.isPublic( FlowRouter.current().route.name ) || !!Meteor.user(); } }; }, loading() { return <div className="loading"></div>; }, getView() { return this.data.canView() ? this.props.yield : <Login />; }, render() { return <div className="app-root"> <AppHeader hasUser={this.data.hasUser} /> <div className="container"> {this.data.loggingIn ? this.loading() : this.getView()} </div> </div>; } } ); 

标题：

没有宇宙，我们根据用户状态改变品牌链接。 然后，我们检查hasUser（作为应用程序组件中的道具传递）来更改要显示的导航组件。

 AppHeader = React.createClass({ mixins: [ ReactMeteorData ], getMeteorData() { return { brandLink: !!Meteor.user() ? '/hidden' : '/login' }; }, render() { return ( <nav className="navbar navbar-default" role="navigation"> <div className="container"> <div className="navbar-header"> <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"><span className="sr-only">Toggle navigation</span><span className="icon-bar"></span> <span className="icon-bar"></span><span className="icon-bar"></span> </button> <a className="navbar-brand" href={this.data.brandLink}>AuthExample</a> </div> {this.props.hasUser ? <AuthenticatedNavigation /> : <PublicNavigation />} </div> </nav> ); } }); 

AuthenticatedNavigation组件：

 AuthenticatedNavigation = React.createClass({ currentUserEmail() { return Meteor.user().emails[0].address; }, logout( event ) { event.preventDefault(); return Meteor.logout( () => FlowRouter.go( '/login' ) ); }, render() { return <div id="navbar-collapse" className="collapse navbar-collapse"> <ul className="nav navbar-nav"> <li className={FlowHelpers.currentRoute( 'hidden' )}><a href="/hidden">Hidden</a> </li> </ul> <ul className="nav navbar-nav navbar-right"> <li className="dropdown"> <a href="#" className="user-profile-toggle dropdown-toggle clearfix" data-toggle="dropdown">{this.currentUserEmail()} <span className="caret"></span> </a> <ul className="dropdown-menu" role="menu"> <li><a href="/preferences">Account Preferences</a></li> <li className="logout" onClick={this.logout}><a href="#">Logout</a></li> </ul> </li> </ul> </div>; } }); 

公共导航组件：

 PublicNavigation = React.createClass({ render() { return ( <div id="navbar-collapse" className="collapse navbar-collapse"> <ul className="nav navbar-nav navbar-right"> <li className={FlowHelpers.currentRoute( 'login' )}> <a href={FlowHelpers.pathFor( 'login' )}>Login</a> </li> </ul> </div> ); } } ); 

有关更多详细信息， 请参阅https://themeteorchef.com/snippets/authentication-with-react-and-flow-router/ 。