翻译 Meteor React 制造 Todos - 09 - 增加用户账户

2024年1月11日 165次阅读 来源: AnnatarHe

增加多用户账户

Meteor带来了一套账户体系然后趁便还带了用户界面来让你能够在几分钟以内在你的运用中增加多用户功用

如今，这套UI组件运用Blaze作为默许的UI引擎，在将来，可能会以React的专有组件来将其替代。

为了开启这套账户体系和UI界面，我们需要去增加相干的包。在你的运用目次中，实行下面的敕令：

meteor add accounts-ui accounts-password

用React来包装一个Blaze组件

为了从accounts-ui这个包中运用Blaze UI组件，我们需要用React的组件来把他包装一下。
来建立一个叫AccountsUIWrapper的新组件吧。

// 新文件 AccountsUIWrapper

AccountsUIWrapper = React.createClass({
  componentDidMount() {
    // Use Meteor Blaze to render login buttons
    this.view = Blaze.render(Template.loginButtons,
      React.findDOMNode(this.refs.container));
  },
  componentWillUnmount() {
    // Clean up Blaze view
    Blaze.remove(this.view);
  },
  render() {
    // Just render a placeholder container that will be filled in
    return <span ref="container" />;
  }
});

我们只需要在App组件中定义一下就能够包括这个组件了：

  Hide Completed Tasks
</label>

<!-- 定义最先 -->
<AccountsUIWrapper />
<!-- 定义完毕 -->

<form className="new-task" onSubmit={this.handleSubmit} >
  <input
    type="text"

然后，增加下面的代码来举行账户界面的设定。运用username，而不是email

// 在 simple-todos-react.jsx 文件

if (Meteor.isClient) {

    // 到场最先
  // 这段代码只会在客户端实行
  Accounts.ui.config({
    passwordSignupFields: "USERNAME_ONLY"
  });
    // 到场完毕

  Meteor.startup(function () {

增加用户关联功用

如今你已能够建立账户并登录你的运用程序了。这看起来挺牛B的，然则如今的用户登录和退出实在并非有效的。
我们得增加下面两条特征：

  1. 只对已上岸用户展现新使命的输入框

  2. 展现每一个运用的建立者

为了杀青如许的结果，我们得在tasks鸠合中增加两条字段

  1. owner — 建立使命的用户_id

  2. username — 建立使命的用户的username。我们将会把username存放在使命对象的字典中，如许我们就不用在每次展现使命的时刻从user表内里拿数据了

起首，在handleSubmit的事宜监听上增加一些代码来保留响应的字段

Tasks.insert({
  text: text,
  createdAt: new Date(),            // 当前时候
  // 增加最先
  owner: Meteor.userId(),           // 已上岸用户的_id
  username: Meteor.user().username  // 已上岸用户的用户名
  // 增加完毕
});

修正getMeteorData中的return语句来猎取当前登录用户的个人信息

// App.jsx
    return {
      tasks: Tasks.find(query, {sort: {createdAt: -1}}).fetch(),
      // 增加最先
      incompleteCount: Tasks.find({checked: {$ne: true}}).count(),
      currentUser: Meteor.user()
      // 增加完毕
    };
  },

然后，在render要领上，增加推断语句使之只在用户登录后才会显现。

// 在App.jsx文件中
  <AccountsUIWrapper />

    // 修正最先
  { this.data.currentUser ?
    <form className="new-task" onSubmit={this.handleSubmit} >
      <input
        type="text"
        ref="textInput"
        placeholder="Type to add new tasks" />
    </form> : ''
  }
  // 修正完毕
</header>

<ul>

末了，增加语句，使之能够在每一个文本之前显现用户名

          checked={this.props.task.checked}
          onClick={this.toggleChecked} />
 
                // 修正最先
        <span className="text">
          <strong>{this.props.task.username}</strong>: {this.props.task.text}
        </span>
        // 修正完毕

      </li>
    );
  }

在你的浏览器中，增加一些使命，然后你会看到你的用户名涌现了。那些这一步骤之前的老使命并不会有附上名字。只管删掉就是了

如今，用户能够上岸，我们也能够跟踪每一个使命的所属用户。让我们来更深条理的思索一下我们方才发明的观点。

自动的账户界面

这段翻译的不好，最悦目原版：https://www.meteor.com/tutorials/react/adding-user-accounts

假如我们的运用有accounts-ui包，我们必需去做的是经由过程衬着被包括的UI组件来增加上岸下拉框。这个下拉框会检测上岸要领是不是被到场到了app中，并恰当的展现掌握(界面)。在我们这一部份，开启了login要领的只要accounts-password，因而，下拉框展现了password字段。假如你比较喜好更进一步，你也能够增加accounts-facebook包，如许就能够在你的运用中开启Facebook上岸体式格局 — Facebook按钮将会自动的在你的下拉框中涌现。

从已上岸用户中猎取信息

在你的getMeteorData要领中，你能够运用Meteor.user()来确认用户是不是已上岸，你也能够经由过程这个来猎取信息。比方：Meteor.user().username包括了已上岸用户的用户名。你也能够用Meteor.userId()来调解当前用户的_id

鄙人一个步骤，我们将进修如安在服务器端经由过程数据考证来使我们的运用越发平安

    原文作者：AnnatarHe
    原文地址: https://segmentfault.com/a/1190000003852503
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞