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

Steven 發布于2019-08-21 10:43 / 1525人閱讀

摘要：在上，最好的方法就是通過聲明方法。這些方法叫做還有，這將會替換執行的方法。我們做這些是為了開啟一個我們稱之為樂觀的的特性?？蛻舳讼蚍掌鞫税l送一個在安全環境下的請求。

方法的安全性

在這個步驟之前，這款應用的任何用戶都可以修改數據庫的任何部分，在一個非常有意思的小項目或者演示項目中可能已經不錯了，但是任何一個真實的應用都需要對這些數據進行權限控制。
在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添加額外的驗證邏輯

我們的客戶端代碼和數據庫邏輯更加的分離了。取代了許多在事件監聽被觸發的時候的雜事?，F在我們有了可以在任何地方被調用的一些方法。

樂觀的UI

那么我們為什么要在服務端和客戶端定義我們自己的方法呢。我們做這些是為了開啟一個我們稱之為“樂觀的UI”的特性。

當我們在客戶端嗲用Meteor.call方法的時候，在這個時間點將會發生兩件事情。

客戶端向服務器端發送一個在安全環境下的請求。就像是AJAX那樣的運行的請求。

一個方法模擬器直接會在客戶端運行。它試圖通過已有的信息來預測服務端返回的結果

這就意味著來自后端(服務器端)的結果到達客戶端之前，新創建的任務已經實際地在屏幕上展現出來了。

如果從服務端返回的結果和在客戶端模擬的結果一致，一切仍然像之前所展現的一樣。
如果從服務端返回的結果和在客戶端模擬的結果不一致，那么界面將會補充上來自服務端的真實狀態的反應。

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

云服務器 GPU云服務器報表的制作方法表格的制作方法表格的制作方法視頻可視化的數據視頻的制作方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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