翻译 Meteor React 制作 Todos - 09 - 添加用户账户

levius 发布于2019-08-21 10:43 / 3065人阅读

摘要：为了开启这套账户系统和界面，我们需要去添加相关的包。使用，而不是在文件加入开始这段代码只会在客户端执行加入结束添加用户关联功能现在你已经可以创建账户并登录你的应用程序了。例如包含了已登陆用户的用户名。

添加多用户账户

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 ;
  }
});

我们只需要在App组件中定义一下就可以包含这个组件了：

  Hide Completed Tasks







  
然后，添加下面的代码来进行账户界面的设定。使用username，而不是email
// 在 simple-todos-react.jsx 文件

if (Meteor.isClient) {

    // 加入开始
  // 这段代码只会在客户端执行
  Accounts.ui.config({
    passwordSignupFields: "USERNAME_ONLY"
  });
    // 加入结束

  Meteor.startup(function () {
添加用户关联功能
现在你已经可以创建账户并登录你的应用程序了。这看起来挺牛B的，但是现在的用户登录和退出其实并不是有用的。
我们得添加下面两条特性：

只对已登陆用户展示新任务的输入框

展示每个应用的创建者


为了达成这样的效果，我们得在tasks集合中添加两条字段

owner -- 创建任务的用户_id

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文件中
  

    // 修改开始
  { this.data.currentUser ?
    
      
     : ""
  }
  // 修改结束



最后，添加语句，使之可以在每个文本之前显示用户名
          checked={this.props.task.checked}
          onClick={this.toggleChecked} />
 
                // 修改开始
        
          {this.props.task.username}: {this.props.task.text}
        
        // 修改结束

      
    );
  }
在你的浏览器中，添加一些任务，然后你会看到你的用户名出现了。那些这一步骤之前的老任务并不会有附上名字。尽管删掉就是了
现在，用户可以登陆，我们也可以跟踪每一个任务的所属用户。让我们来更深层次的思考一下我们刚刚发现的概念。
自动的账户界面
这段翻译的不好，最好看原版：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
在下一个步骤，我们将学习如何在服务器端通过数据验证来使我们的应用更加安全

云服务器 GPU云服务器用户账户用户账户控制一个账户可添加多少域名为服务器建立用户账户

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86081.html

翻译 Meteor React 制作 Todos - 07 - 在移动端运行

摘要：在安卓设备上运行安卓应用首先，把上面关于安卓的部分都走完，以确保你的电脑上安装了所有的安卓工具。还有一件事你在真实设备上运行之前，必须得退出安卓模拟器。在安卓和苹果上运行你的应用目前Windows平台的Meteor并不支持移动应用的构建，如果你正在使用Windows平台的Meteor，你得跳过这一步了。现在来看，我们编写我们的应用，测试我们的应用都是在浏览器上，其实Meteor早...

Jacendfeng 2019-08-22 10:58 评论0 收藏0
翻译 Meteor React 制作 Todos - 11 - 发布订阅

摘要：通过发布订阅模式过滤数据现在我们已经把应用中比较敏感的代码放到了一些方法里面，我们还需要学习安全故事的另一半内容了。当在客户端被调用时传入发布器名称，客户端将会从发布器订阅所有的数据。这个按钮应该只是给任务的所有者来显示。通过发布订阅模式过滤数据现在我们已经把应用中比较敏感的代码放到了一些方法里面，我们还需要学习Meteor安全故事的另一半内容了。到现在为止，我们一直是假设整个整个...

用户83 2019-08-22 10:58 评论0 收藏0
翻译 Meteor React 制作 Todos - 10 - 方法的安全性

摘要：在上，最好的方法就是通过声明方法。这些方法叫做还有，这将会替换执行的方法。我们做这些是为了开启一个我们称之为乐观的的特性。客户端向服务器端发送一个在安全环境下的请求。方法的安全性在这个步骤之前，这款应用的任何用户都可以修改数据库的任何部分，在一个非常有意思的小项目或者演示项目中可能已经不错了，但是任何一个真实的应用都需要对这些数据进行权限控制。在Meteor上，最好的方法就是通过声...

Steven 2019-08-21 10:43 评论0 收藏0
翻译 Meteor React 制作 Todos - 06 - 部署应用

摘要：添加，删除，确认完成这些操作，你将会看到你的应用的界面响应非常的快。。这是因为并不会在更新用户界面之前等着服务端的响应数据。部署你的应用现在你有了一个可以运行的待办事宜的应用，你可以分享给你的朋友们！Meteor使得发布你的应用到其他人可以使用的互联网变得非常的简单。同样是在你的应用文件夹的命令行中输入： meteor deploy my_app_name.meteor.com ...

xiaochao 2019-08-22 10:58 评论0 收藏0
翻译 Meteor React 制作 Todos - 04 - 表单与事件

摘要：通过表单添加任务在这个步骤，我们将为用户在列表上添加输入框。在中，这是一种监听浏览器事件的方式，就像是在表单上有提交事件一样。这对一个任务列表来说并不是非常好。在下一步，我们将给待办事宜的列表添加一个非常重要的功能已完成功能和删除功能通过表单(form)添加任务在这个步骤，我们将为用户在列表上添加输入框。首先，在App.jsx文件中App组件上添加表单吧。 Tod...

Hujiawei 2019-08-21 10:43 评论0 收藏0