Meteor 1.3 React日本語チュートリアル (step10)
Meteorの日本語版のチュートリアルのstep10です。
目次
- 最初のアプリを作成する
- Reactコンポーネントでビューを定義する
- コレクションにタスクを格納する
- フォームを使ってタスクを追加する
- タスクにチェックマークをつける・削除する
- アプリをAndroidやiOSで動かす
- 一時的なUIデータをステートに格納する
- ユーザアカウントを追加する
- メソッドによるセキュリティ
- パブリッシュとサブスクライブによるデータフィルタリング (本記事)
- テストについて
- その後の学習法について
パブリッシュとサブスクライブによるデータフィルタリング
前回のステップで、アプリの重要なコードをメソッドに移して、安全にしました。今回は、Meteorの安全性のもう一つの側面について学びます。これまではデータベース全体がクライアント側から参照できることを前提にしてきました。すなわち、Tasks.find()を呼べばコレクションの中のすべてのタスクが取得できる、という意味です。アプリのユーザがプライバシーが必要なデータを登録したい場合に、これはよくありません。Meteorがどのようなデータをクライアント側のデータベースに送るから制御する方法が必要です。
前回のステップのinsecureと同様に、新しく作られたMeteorプロジェクトにはデフォルトでautopublishパッケージが追加されています。これはデータベースのすべての内容を自動的にクライアントと同期するパッケージです。このパッケージを削除してどうなるか見てみましょう。下記のコマンドを実行してください。
|
|
アプリが更新されると、タスクリストが空になるはずです。autopublishパッケージがない状態では、サーバがクライアントに何を送るかを明確に示す必要があります。Meteorでこれを実現する関数がMeteor.publishとMeteor.subscribeです。
まずは、すべてのタスクをパブリッシュしてみましょう。imports/api/tasks.jsを下記のように修正してください。修正後のファイルはこちらのようになります。
次に、Appコンポーネントが作られたときに、そのパブリッシュしたものにサブスクライブしてみましょう。imports/ui/App.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。
これが完了すると、すべてのタクスがまた見えるようになるでしょう。
Meteor.publishをサーバで呼び出すと"tasks"という名前のパブリケーションが登録されます。Meteor.subscribeがクライアントからそのパブリケーションの名前で呼び出されると、クライアントはそのパブリケーションで指定されているすべてのデータをサブスクライブ(つまり、購読)します。今の例ではデータベースの中のすべてのタスクです。パブリッシュ・サブスクライブモデルの真価を見るために、ユーザがタスクを「プライベート」にする機能を実装してみましょう。「プライベート」とは他のユーザが見ることができないことを意味します。
タスクをプライベートにするボタンを追加する
タクスオブジェクトに新しいプロパティ”private”を追加して、また、ユーザがタスクをプライベートにするボタンを追加しましょう。このボタンはタスクの所有者のみに見えるべきです。また、タスクがpublic(プライベートでない)かprivateであるかの状態を示すラベルも表示したいでしょう。
まず、タスクのプライベート状態を設定するメソッドを追加する必要があります。imports/api/tasks.jsを下記のように修正してください。修正後のファイルはこちらのようになります。
次に、privateボタンを表示するかを決めるために新しいプロパティをTaskに渡す必要があります。ボタンはログインしているユーザがそのタスクの所有者である場合のみ表示されるべきです。
imports/ui/App.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。
続いて、imports/ui/Task.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。
ボタンを追加しましょう。この新しいpropを使って表示するかを判断します。imports/ui/Task.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。
このボタンが呼び出すイベントハンドラを定義します。imports/ui/Task.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。
最後に、Taskコンポーネントの<li>要素のクラスをタスクのプライベート状態に応じて変更するようにしましょう。このために、classnamesNPMパッケージを使います。下記のコマンドを実行してください。
|
|
このパッケージを使って表示するタスクのクラスを選択します。imports/ui/Task.jsxを下記のように修正してください。修正後のファイルはこちらのようになります。
プライバシー状態に応じてタスクを選択的にパブリッシュする
タスクをプライベートに設定する方法ができたので、ユーザが閲覧権限を持つタスクだけを送るようにパブリッシュ関数を変更すべきです。imports/api/tasks.jsを下記のように修正してください。修正後のファイルはこちらのようになります。
この機能が正しく動いているか試すには、ブラウザのプライベートブラウジングモードを使って別のユーザでログインすることができます。2つのウインドウを並べて開いて、一方でタスクをプライベートにすると、他方から見えなくなることを確認してください。プライベートを外す(publicにする)ことでまた見えるようになります。
追加のメソッドのセキュリティ
プライベートタスクの機能を完成させるためには、deleteTaskメソッドとsetCheckedメソッドにチェックを追加して、タクスの所有者しか操作できないようにする必要があります。imports/api/tasks.jsを下記のように修正してください。修正後のファイルはこちらのようになります。
実はこのコードでは、プライベートでない(public)タスクは誰でも削除することができてしまいます。コードに少し修正を加えると、所有者だけが自分のタスクを削除することができるようになります。
やっと、プライベートタスクの機能が完成しました。これでアプリは安全で、攻撃者が他人のプライベートタスクを見たり修正したりすることはできません。
次のステップへ
step11: テストについて