摘要：通過發(fā)布訂閱模式過濾數(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ù)的所有者來顯示。

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

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

meteor remove autopublish

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

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

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

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

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

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

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

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

    // simple-todos-react.jsx文件

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

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

  }
});

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

// App.jsx文件

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

    return ;
      // 添加結(jié)束

  });
},

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

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

  },
 
  toggleChecked() {

添加一個(gè)按鈕，使其新的屬性去決定它是否應(yīng)該被顯示

// Task.jsx文件

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

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


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

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

// Task.jsx 文件

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

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

render() {

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

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

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

  return (
    

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

// simple-todos-react.jsx 文件

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

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

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

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

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

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

  Tasks.remove(taskId);

},

setChecked(taskId, setChecked) {

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

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

注意：這個(gè)代碼允許任何人刪除任意公有任務(wù)。你應(yīng)該當(dāng)盡力做一些小的改變：只有任務(wù)擁有者可以刪除他們的任務(wù)

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