node.js - 在 React 中呈现的 Blaze LoginButtons 模板 - 登录仅适用于主页

Question

所以我使用 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>

为什么这只适用于某些页面？

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>

....

在没有尝试过多改变你对工具的选择的情况下，我已经探索了 React、Meteor 和 Authentication 一段时间，经常陷入状态管理和其他黑洞。以下是一些选项的概述:

React Accounts-UI 包

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

它很容易实现，并且有许多 React 特定的配置选项。

查看“创建您自己的样式版本”以在导航栏中实现:https://github.com/studiointeract/accounts-ui/blob/master/README.md

<小时/>

使用 Kadira FlowRouter 和 ReactLayout 进行 react

对于导航栏中的某些内容，这里有一个流路由器的刺探。

来自 Meteor Guide 用户/身份验证部分:

While a router is optional and the basic functionality will work without it, it’s also a good idea to pick a router integration:

用于导航栏登录(不是 React Accounts-UI)。

您需要Flowrouter和 Reactlayout

路线

我们创建 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 mix 允许我们测试用户是否已登录或正在登录。 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>; 
    } 
  }
);

标题:

没什么大不了的，我们根据用户状态更改品牌链接。然后我们检查 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>;
    } 
 });

公共(public)导航组件:

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/了解更多详情。