成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Steven / 1533人閱讀

摘要：在上，最好的方法就是通過(guò)聲明方法。這些方法叫做還有，這將會(huì)替換執(zhí)行的方法。我們做這些是為了開(kāi)啟一個(gè)我們稱之為樂(lè)觀的的特性?？蛻舳讼蚍?wù)器端發(fā)送一個(gè)在安全環(huán)境下的請(qǐng)求。

方法的安全性

在這個(gè)步驟之前，這款應(yīng)用的任何用戶都可以修改數(shù)據(jù)庫(kù)的任何部分，在一個(gè)非常有意思的小項(xiàng)目或者演示項(xiàng)目中可能已經(jīng)不錯(cuò)了，但是任何一個(gè)真實(shí)的應(yīng)用都需要對(duì)這些數(shù)據(jù)進(jìn)行權(quán)限控制。
在Meteor上，最好的方法就是通過(guò)聲明方法。以此來(lái)直接取代客戶端的代碼。這些方法叫做insert, update, 還有remove，這將會(huì)替換執(zhí)行的方法。它將會(huì)確認(rèn)用戶是否有權(quán)限完成這么一整套操作。那么隨后在客戶端中做出的任何對(duì)客戶端的改變都會(huì)發(fā)給數(shù)據(jù)庫(kù)

移除 insecure

每一個(gè)新創(chuàng)建的Meteor項(xiàng)目都被默認(rèn)的添加了insecure包。這個(gè)包允許我們從客戶端中編輯數(shù)據(jù)庫(kù)。在做產(chǎn)品原型的時(shí)候這個(gè)包非常的有用，但是現(xiàn)在我們得關(guān)掉這個(gè)備胎。要移除這個(gè)包，我們得去應(yīng)用目錄下執(zhí)行

meteor remove insecure

如果在移除這個(gè)包之后你試著去使用這款應(yīng)用，你將會(huì)看到輸入框或者是按鈕都不能用了，這是因?yàn)樗械目蛻舳藬?shù)據(jù)庫(kù)的權(quán)限被取消了，現(xiàn)在我們需要在我們的應(yīng)用中通過(guò)使用一些方法來(lái)重寫(xiě)一些部分

定義一些方法

首先我們需要定義一些方法，我們需要一個(gè)方法，這個(gè)方法為我們定義了每個(gè)數(shù)據(jù)庫(kù)想在客戶端執(zhí)行的所有操作。這些方法應(yīng)該用代碼定義，可以同時(shí)在客戶端和服務(wù)端執(zhí)行 -- 我們會(huì)晚點(diǎn)兒在標(biāo)題為“樂(lè)觀的界面”的章節(jié)中繼續(xù)討論

// simple-todos-react.jsx文件

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

// 添加開(kāi)始
Meteor.methods({
  addTask(text) {
    // 在插入之前確保用戶已經(jīng)登陸
    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} });
  }
});
// 添加結(jié)束

現(xiàn)在我們定義了我們的一些方法。我們需要去更新一些地方。我會(huì)要用剛剛定義好的方法去操作數(shù)據(jù)庫(kù)，而不是默認(rèn)的。

// App.jsx文件中

// 通過(guò)React的ref屬性來(lái)找到文本的字段
var text = React.findDOMNode(this.refs.textInput).value.trim();

// 添加開(kāi)始
Meteor.call("addTask", text);
// 添加結(jié)束

// Clear form
React.findDOMNode(this.refs.textInput).value = "";
// Tasks.jsx文件中
 
toggleChecked() {
  // 設(shè)置確認(rèn)值為當(dāng)前屬性的相反值
  // 添加下一行
  Meteor.call("setChecked", this.props.task._id, ! this.props.task.checked);
},

deleteThisTask() {

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

render() {

現(xiàn)在，我們的輸入和按鈕又能用了，我們從這些工作中收獲了什么呢？

當(dāng)我們向數(shù)據(jù)庫(kù)插入數(shù)據(jù)的時(shí)候，現(xiàn)在我們已經(jīng)可以安全的驗(yàn)證用戶是否登錄，createdAt字段是不是正確，owner和username字段是不是正確。一個(gè)用戶不能模仿任何人了。

當(dāng)用戶想讓任務(wù)成為隱私性質(zhì)的時(shí)候。我們可以在后面的步驟中給setChecked和deleteTask添加額外的驗(yàn)證邏輯

我們的客戶端代碼和數(shù)據(jù)庫(kù)邏輯更加的分離了。取代了許多在事件監(jiān)聽(tīng)被觸發(fā)的時(shí)候的雜事。現(xiàn)在我們有了可以在任何地方被調(diào)用的一些方法。

樂(lè)觀的UI

那么我們?yōu)槭裁匆诜?wù)端和客戶端定義我們自己的方法呢。我們做這些是為了開(kāi)啟一個(gè)我們稱之為“樂(lè)觀的UI”的特性。

當(dāng)我們?cè)诳蛻舳肃怯?b>Meteor.call方法的時(shí)候，在這個(gè)時(shí)間點(diǎn)將會(huì)發(fā)生兩件事情。

客戶端向服務(wù)器端發(fā)送一個(gè)在安全環(huán)境下的請(qǐng)求。就像是AJAX那樣的運(yùn)行的請(qǐng)求。

一個(gè)方法模擬器直接會(huì)在客戶端運(yùn)行。它試圖通過(guò)已有的信息來(lái)預(yù)測(cè)服務(wù)端返回的結(jié)果

這就意味著來(lái)自后端(服務(wù)器端)的結(jié)果到達(dá)客戶端之前，新創(chuàng)建的任務(wù)已經(jīng)實(shí)際地在屏幕上展現(xiàn)出來(lái)了。

如果從服務(wù)端返回的結(jié)果和在客戶端模擬的結(jié)果一致，一切仍然像之前所展現(xiàn)的一樣。
如果從服務(wù)端返回的結(jié)果和在客戶端模擬的結(jié)果不一致，那么界面將會(huì)補(bǔ)充上來(lái)自服務(wù)端的真實(shí)狀態(tài)的反應(yīng)。

掌握了Meteor的一些“方法定義”和”樂(lè)觀的UI“，你就得到了兩個(gè)世界的精髓 -- 服務(wù)端代碼的安全保護(hù)和無(wú)傳輸延遲(no round-trip delay)。閱讀blog post about optimistic UI可以了解更多這方面的知識(shí)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86075.html

相關(guān)文章

  • 翻譯 Meteor React 制作 Todos - 11 - 發(fā)布訂閱

    摘要：通過(guò)發(fā)布訂閱模式過(guò)濾數(shù)據(jù)現(xiàn)在我們已經(jīng)把應(yīng)用中比較敏感的代碼放到了一些方法里面，我們還需要學(xué)習(xí)安全故事的另一半內(nèi)容了。當(dāng)在客戶端被調(diào)用時(shí)傳入發(fā)布器名稱，客戶端將會(huì)從發(fā)布器訂閱所有的數(shù)據(jù)。這個(gè)按鈕應(yīng)該只是給任務(wù)的所有者來(lái)顯示。 通過(guò)發(fā)布訂閱模式過(guò)濾數(shù)據(jù) 現(xiàn)在我們已經(jīng)把應(yīng)用中比較敏感的代碼放到了一些方法里面，我們還需要學(xué)習(xí)Meteor安全故事的另一半內(nèi)容了。到現(xiàn)在為止，我們一直是假設(shè)整個(gè)整個(gè)...

    用戶83 評(píng)論0 收藏0

  • 翻譯 Meteor React 制作 Todos - 09 - 添加用戶賬戶

    摘要：為了開(kāi)啟這套賬戶系統(tǒng)和界面，我們需要去添加相關(guān)的包。使用，而不是在文件加入開(kāi)始這段代碼只會(huì)在客戶端執(zhí)行加入結(jié)束添加用戶關(guān)聯(lián)功能現(xiàn)在你已經(jīng)可以創(chuàng)建賬戶并登錄你的應(yīng)用程序了。例如包含了已登陸用戶的用戶名。 添加多用戶賬戶 Meteor帶來(lái)了一套賬戶系統(tǒng)然后順便還帶了用戶界面來(lái)讓你可以在幾分鐘之內(nèi)在你的應(yīng)用中添加多用戶功能 目前，這套UI組件使用Blaze作為默認(rèn)的UI引擎，在未來(lái)，可能會(huì)以...

    levius 評(píng)論0 收藏0

  • 翻譯 Meteor React 制作 Todos - 04 - 表單與事件

    摘要：通過(guò)表單添加任務(wù)在這個(gè)步驟，我們將為用戶在列表上添加輸入框。在中，這是一種監(jiān)聽(tīng)瀏覽器事件的方式，就像是在表單上有提交事件一樣。這對(duì)一個(gè)任務(wù)列表來(lái)說(shuō)并不是非常好。在下一步，我們將給待辦事宜的列表添加一個(gè)非常重要的功能已完成功能和刪除功能 通過(guò)表單(form)添加任務(wù) 在這個(gè)步驟，我們將為用戶在列表上添加輸入框。 首先，在App.jsx文件中App組件上添加表單吧。 Tod...

    Hujiawei 評(píng)論0 收藏0

  • 翻譯 Meteor React 制作 Todos - 02 - 組件

    摘要：用定義視圖組件在中，視圖組件是被使用定義的。你的組件可以有任何你想要的方法。組件可以接收來(lái)自于父組件通過(guò)屬性傳過(guò)來(lái)的數(shù)據(jù)。因?yàn)楸窘坛虒Ｗ⒂诤?，所以你可以拷貝下面的代碼到文件中。嘿嘿，來(lái)添加上吧只要把改名成就好了 在 React 組件中定義視圖 在開(kāi)始編寫(xiě)React視圖庫(kù)之前，要先添加react包，這個(gè)包囊括了你在Meteor應(yīng)用中開(kāi)始運(yùn)行React所需要所有東西。這個(gè)React庫(kù)自己可...

    wuyangnju 評(píng)論0 收藏0

  • 翻譯 Meteor React 制作 Todos - 01 - 創(chuàng)建應(yīng)用

    摘要：閑扯在翻譯之前我還是要簡(jiǎn)要介紹一下，這是一款跨時(shí)代的框架。后來(lái)開(kāi)始使用動(dòng)態(tài)的腳本語(yǔ)言，比如后來(lái)以此構(gòu)成了框架。最為出名的自然是。通過(guò)來(lái)傳遞數(shù)據(jù)，在本地起這種事情使得開(kāi)發(fā)進(jìn)入了新的階段。如果你覺(jué)得我翻譯的很爛，來(lái)給我說(shuō)吧郵件地址 閑扯 在翻譯之前我還是要簡(jiǎn)要介紹一下Meteor，這是一款跨時(shí)代的框架。真的，完全沒(méi)有騙你。 一開(kāi)始的網(wǎng)站是純靜態(tài)頁(yè)面搭建的。 后來(lái)開(kāi)始使用動(dòng)態(tài)的腳本語(yǔ)言，比如...

    VishKozus 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<