翻译 Meteor React 制作 Todos - 10 - 方法的安全性

Steven 发布于2019-08-21 10:43 / 1509人阅读

摘要：在上，最好的方法就是通过声明方法。这些方法叫做还有，这将会替换执行的方法。我们做这些是为了开启一个我们称之为乐观的的特性。客户端向服务器端发送一个在安全环境下的请求。

方法的安全性

在这个步骤之前，这款应用的任何用户都可以修改数据库的任何部分，在一个非常有意思的小项目或者演示项目中可能已经不错了，但是任何一个真实的应用都需要对这些数据进行权限控制。
在Meteor上，最好的方法就是通过声明方法。以此来直接取代客户端的代码。这些方法叫做insert, update, 还有remove，这将会替换执行的方法。它将会确认用户是否有权限完成这么一整套操作。那么随后在客户端中做出的任何对客户端的改变都会发给数据库

移除 insecure

每一个新创建的Meteor项目都被默认的添加了insecure包。这个包允许我们从客户端中编辑数据库。在做产品原型的时候这个包非常的有用，但是现在我们得关掉这个备胎。要移除这个包，我们得去应用目录下执行

meteor remove insecure

如果在移除这个包之后你试着去使用这款应用，你将会看到输入框或者是按钮都不能用了，这是因为所有的客户端数据库的权限被取消了，现在我们需要在我们的应用中通过使用一些方法来重写一些部分

定义一些方法

首先我们需要定义一些方法，我们需要一个方法，这个方法为我们定义了每个数据库想在客户端执行的所有操作。这些方法应该用代码定义，可以同时在客户端和服务端执行 -- 我们会晚点儿在标题为“乐观的界面”的章节中继续讨论

// simple-todos-react.jsx文件

    React.render(, document.getElementById("render-target"));
  });
}

// 添加开始
Meteor.methods({
  addTask(text) {
    // 在插入之前确保用户已经登陆
    if (! Meteor.userId()) {
      throw new Meteor.Error("not-authorized");
    }
 
    Tasks.insert({
      text: text,
      createdAt: new Date(),
      owner: Meteor.userId(),
      username: Meteor.user().username
    });
  },
 
  removeTask(taskId) {
    Tasks.remove(taskId);
  },
 
  setChecked(taskId, setChecked) {
    Tasks.update(taskId, { $set: { checked: setChecked} });
  }
});
// 添加结束

现在我们定义了我们的一些方法。我们需要去更新一些地方。我会要用刚刚定义好的方法去操作数据库，而不是默认的。

// App.jsx文件中

// 通过React的ref属性来找到文本的字段
var text = React.findDOMNode(this.refs.textInput).value.trim();

// 添加开始
Meteor.call("addTask", text);
// 添加结束

// Clear form
React.findDOMNode(this.refs.textInput).value = "";

// Tasks.jsx文件中
 
toggleChecked() {
  // 设置确认值为当前属性的相反值
  // 添加下一行
  Meteor.call("setChecked", this.props.task._id, ! this.props.task.checked);
},

deleteThisTask() {

    // 添加下面一行
  Meteor.call("removeTask", this.props.task._id);
},

render() {

现在，我们的输入和按钮又能用了，我们从这些工作中收获了什么呢？

当我们向数据库插入数据的时候，现在我们已经可以安全的验证用户是否登录，createdAt字段是不是正确，owner和username字段是不是正确。一个用户不能模仿任何人了。

当用户想让任务成为隐私性质的时候。我们可以在后面的步骤中给setChecked和deleteTask添加额外的验证逻辑

我们的客户端代码和数据库逻辑更加的分离了。取代了许多在事件监听被触发的时候的杂事。现在我们有了可以在任何地方被调用的一些方法。

乐观的UI

那么我们为什么要在服务端和客户端定义我们自己的方法呢。我们做这些是为了开启一个我们称之为“乐观的UI”的特性。

当我们在客户端嗲用Meteor.call方法的时候，在这个时间点将会发生两件事情。

客户端向服务器端发送一个在安全环境下的请求。就像是AJAX那样的运行的请求。

一个方法模拟器直接会在客户端运行。它试图通过已有的信息来预测服务端返回的结果

这就意味着来自后端(服务器端)的结果到达客户端之前，新创建的任务已经实际地在屏幕上展现出来了。

如果从服务端返回的结果和在客户端模拟的结果一致，一切仍然像之前所展现的一样。
如果从服务端返回的结果和在客户端模拟的结果不一致，那么界面将会补充上来自服务端的真实状态的反应。

掌握了Meteor的一些“方法定义”和”乐观的UI“，你就得到了两个世界的精髓 -- 服务端代码的安全保护和无传输延迟(no round-trip delay)。阅读blog post about optimistic UI可以了解更多这方面的知识

云服务器 GPU云服务器报表的制作方法表格的制作方法表格的制作方法视频可视化的数据视频的制作方法

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

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

翻译 Meteor React 制作 Todos - 11 - 发布订阅

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

用户83 2019-08-22 10:58 评论0 收藏0
翻译 Meteor React 制作 Todos - 09 - 添加用户账户

摘要：为了开启这套账户系统和界面，我们需要去添加相关的包。使用，而不是在文件加入开始这段代码只会在客户端执行加入结束添加用户关联功能现在你已经可以创建账户并登录你的应用程序了。例如包含了已登陆用户的用户名。添加多用户账户 Meteor带来了一套账户系统然后顺便还带了用户界面来让你可以在几分钟之内在你的应用中添加多用户功能目前，这套UI组件使用Blaze作为默认的UI引擎，在未来，可能会以...

levius 2019-08-21 10:43 评论0 收藏0
翻译 Meteor React 制作 Todos - 04 - 表单与事件

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

Hujiawei 2019-08-21 10:43 评论0 收藏0
翻译 Meteor React 制作 Todos - 02 - 组件

摘要：用定义视图组件在中，视图组件是被使用定义的。你的组件可以有任何你想要的方法。组件可以接收来自于父组件通过属性传过来的数据。因为本教程专注于和，所以你可以拷贝下面的代码到文件中。嘿嘿，来添加上吧只要把改名成就好了在 React 组件中定义视图在开始编写React视图库之前，要先添加react包，这个包囊括了你在Meteor应用中开始运行React所需要所有东西。这个React库自己可...

wuyangnju 2019-08-21 10:42 评论0 收藏0
翻译 Meteor React 制作 Todos - 01 - 创建应用

摘要：闲扯在翻译之前我还是要简要介绍一下，这是一款跨时代的框架。后来开始使用动态的脚本语言，比如后来以此构成了框架。最为出名的自然是。通过来传递数据，在本地起这种事情使得开发进入了新的阶段。如果你觉得我翻译的很烂，来给我说吧邮件地址闲扯在翻译之前我还是要简要介绍一下Meteor，这是一款跨时代的框架。真的，完全没有骗你。一开始的网站是纯静态页面搭建的。后来开始使用动态的脚本语言，比如...

VishKozus 2019-08-21 10:42 评论0 收藏0