摘要：通過發(fā)布訂閱模式過濾數(shù)據(jù)現(xiàn)在我們已經(jīng)把應用中比較敏感的代碼放到了一些方法里面，我們還需要學習安全故事的另一半內容了。當在客戶端被調用時傳入發(fā)布器名稱，客戶端將會從發(fā)布器訂閱所有的數(shù)據(jù)。這個按鈕應該只是給任務的所有者來顯示。

現(xiàn)在我們已經(jīng)把應用中比較敏感的代碼放到了一些方法里面，我們還需要學習Meteor安全故事的另一半內容了。
到現(xiàn)在為止，我們一直是假設整個整個數(shù)據(jù)庫到客戶端上，這意味著我們調用Tasks.find()方法我們將會得到集合中所有的數(shù)據(jù)。如果我們應用程序的用戶想要保存私密敏感信息的話，這樣做并不好。我們需要一種可以控制數(shù)據(jù)的方法，使Meteor發(fā)送所需數(shù)據(jù)到客戶端數(shù)據(jù)庫

就想上一步驟的insecure一樣，所有新的Meteor應用都在開始時帶著autopublish包的。這個包可以自動的同步所有數(shù)據(jù)庫的數(shù)據(jù)到客戶端上，先來移除這個包，然后看看會發(fā)生什么

meteor remove autopublish

當應用程序刷新，任務列表將會變成空的。沒有autopublish包，我們就必須明確的指定服務端發(fā)送什么到客戶端。這個在Meteor的函數(shù)是通過Meteor.publish和Meteor.subscribe來做這些的。

現(xiàn)在來添加他們把

    passwordSignupFields: "USERNAME_ONLY"
  });
    
    // 添加這一行
  Meteor.subscribe("tasks");
 
  Meteor.startup(function () {
    // 在頁面準備好之后使用Meteor.startup來渲染組件
    React.render(, document.getElementById("render-target"));
  });
}

// 添加開始
if (Meteor.isServer) {
  Meteor.publish("tasks", function () {
    return Tasks.find();
  });
}
// 添加結束
 
Meteor.methods({
  addTask(text) {

一旦你添加了這些代碼，所有的任務將會再次出現(xiàn)

在服務端調用Meteor.publish注冊一個名為tasks的發(fā)布器。當Meteor.subscribe在客戶端被調用時(傳入發(fā)布器名稱)，客戶端將會從發(fā)布器訂閱所有的數(shù)據(jù)。這些數(shù)據(jù)是在數(shù)據(jù)庫中所有在這方面的任務。為了真實的感受發(fā)布訂閱模式的力量，讓我們來實現(xiàn)這樣的特性吧，他允許用戶將任務定義為私有狀態(tài)，這樣其他的用戶就不能再看到這些東西了

來給任務添加一個“私有”屬性和一個給用戶將任務私有化的按鈕。
這個按鈕應該只是給任務的所有者來顯示。我們想要一個標簽來表示當前的狀態(tài)：公有或私有

首先，我們要添加一個新的方法，這個方法可以被我們調用并將任務設置為私有狀態(tài)

    // simple-todos-react.jsx文件

  setChecked(taskId, setChecked) {
    Tasks.update(taskId, { $set: { checked: setChecked} });
  },

    // 添加開始
  setPrivate(taskId, setToPrivate) {
    const task = Tasks.findOne(taskId);
 
    // 確保只有任務所有者可以將任務設置為私有狀態(tài)
    if (task.owner !== Meteor.userId()) {
      throw new Meteor.Error("not-authorized");
    }
 
    Tasks.update(taskId, { $set: { private: setToPrivate } });
    // 添加結束

  }
});

現(xiàn)在我們需要傳一個新的屬性給Task，使其決定我們是否想要展示這個私有按鈕。
這個按鈕應該只有在當前登錄的用戶是任務的所有者時才會被展示

// App.jsx文件

renderTasks() {
  // 從this.data.tasks中獲取任務列表
  return this.data.tasks.map((task) => {
  
      // 添加開始
    const currentUserId = this.data.currentUser && this.data.currentUser._id;
    const showPrivateButton = task.owner === currentUserId;

    return ;
      // 添加結束

  });
},

// Task.jsx文件
// Task組件，表示單個的任務
Task = React.createClass({
  propTypes: {

      // 添加開始
    task: React.PropTypes.object.isRequired,
    showPrivateButton: React.PropTypes.bool.isRequired
    // 添加結束

  },
 
  toggleChecked() {

添加一個按鈕，使其新的屬性去決定它是否應該被顯示

// Task.jsx文件

  checked={this.props.task.checked}
  onClick={this.toggleChecked} />

// 添加開始
{ this.props.showPrivateButton ? (
  
    { this.props.task.private ? "Private" : "Public" }
  
) : ""}
// 添加結束


  {this.props.task.username}: {this.props.task.text}

我們要為這個按鈕定義事件監(jiān)聽

// Task.jsx 文件

  Meteor.call("removeTask", this.props.task._id);
},

// 添加開始
togglePrivate() {
  Meteor.call("setPrivate", this.props.task._id, ! this.props.task.private);
},
// 添加結束

render() {

最后一件事，來給Task組件的li元素更新class, 來反映私有狀態(tài)

render() {
  // 當它們被關閉時給一個不同的className,
  // 這樣我們就可以通過CSS來設置好看的樣式了

  // 添加開始
  // 當我們需要的時候可以給“確認框”添加”私有“樣式
  const taskClassName = (this.props.task.checked ? "checked" : "") + " " +
    (this.props.task.private ? "private" : "");
    // 添加結束

  return (
    

現(xiàn)在我們有了設置任務私有的方式，那么我們就要修改我們的發(fā)布函數(shù)使其只發(fā)送已登陸用戶的任務

// simple-todos-react.jsx 文件

}
 
if (Meteor.isServer) {
  // 只發(fā)布公有的或者是屬于當前用戶的任務
  Meteor.publish("tasks", function () {

      // 添加開始
    return Tasks.find({
      $or: [
        { private: {$ne: true} },
        { owner: this.userId }
      ]
    });
    // 添加結束
    
  });
}

要測試這個功能是否能用，我們可以使用瀏覽器的“隱私瀏覽”模式作為一個不同的用戶登錄。把兩個窗口拍兩邊，然后標記一個私有任務，看看另一個用戶是否能夠看到。現(xiàn)在把它再設置成公有狀態(tài)，它就又會出現(xiàn)了！

為了完成我們私有任務的特性，我們需要給deleteTask和setChecked方法一些核實的特性，用來確保只有任務的擁有者可以刪除和完成一個私有任務

// simple-todos-react.jsx
removeTask(taskId) {

    // 添加開始
  const task = Tasks.findOne(taskId);
  if (task.private && task.owner !== Meteor.userId()) {
    // 如果任務是私有狀態(tài)，確保只有擁有者可以刪除
    throw new Meteor.Error("not-authorized");
  }
    // 添加結束

  Tasks.remove(taskId);

},

setChecked(taskId, setChecked) {

    // 添加開始
  const task = Tasks.findOne(taskId);
  if (task.private && task.owner !== Meteor.userId()) {
    // 如果任務是私有的，確保只有任務擁有者可以完成此項任務
    throw new Meteor.Error("not-authorized");
  }
  // 添加結束

  Tasks.update(taskId, { $set: { checked: setChecked} });
},

注意：這個代碼允許任何人刪除任意公有任務。你應該當盡力做一些小的改變：只有任務擁有者可以刪除他們的任務

我們已經(jīng)完成了私有任務的特性了！當攻擊者試著去看或者修改某個私有任務時，我們的應用也是安全的了！