所以我使用的是Meteor / React，但为了方便起见，我使用了Blaze的登录模板。它在主页上运行良好，但是当我尝试从网站上的任何其他页面登录时，页面重新加载并且登录似乎不成功。
这是我的实施。
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>
为什么这只适用于某些页面？
答案 0 :(得分：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>
....
我没有尝试过多地改变你的工具选择，我一直在探索React，Meteor和Authentication，经常陷入状态管理和其他黑洞。以下是我探讨的一些选项的概述：
查看我的回购：https://github.com/atapp/apollo-redux-meteor-userdemo
这是实现身份验证逻辑的一种方法，根据我的经验，一旦你进入React Meteor世界，Redux就不用了。检查一下，如果您有兴趣，我可以为您提供更多信息。
就个人而言，作为一个快速工具，我是React Accounts-UI软件包的忠实粉丝https://atmospherejs.com/std/accounts-ui
它易于实现，并且有许多特定于React的配置选项。
查看＆＃39;创建自己的样式版本＆＃39;在导航栏中https://github.com/studiointeract/accounts-ui/blob/master/README.md
实施对于Navbar中的某些内容，这里有一个流路由器。
来自Meteor Guide用户/验证部分：
虽然路由器是可选的，并且基本功能在没有它的情况下也能正常工作，但选择路由器集成也是个好主意：
对于Navbar登录（不是React Accounts-UI）。
<强>路线
我们创建了2个路由groups，它允许我们轻松地将身份验证逻辑构建到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混合，它允许我们测试用户是否已登录或登录.isPublic函数允许我们测试是否应该允许用户使用当前路由。其余的应该是自我解释的。
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>;
}
}
);
标题
没有任何宇宙，我们会根据用户状态更改brandLink。然后我们检查hasUser（从App组件作为prop传递）来更改要显示的导航组件。
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组件：
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/了解更多详情。