ポリマースターターキットの経路を保護するアプリケーション

Question

私は、Polymer Starter Kitとpolymerfireを使用して、2つの経路（「スタッフ」と「寄付」）を持つfirebaseアプリを作成しています。寄付ルートは公開されており、スタッフルートはプライベートです。私はスタッフルートを保護して、mycompany.comで終わる電子メールを持つユーザーしかログインできないようにしたいと考えています。認証されていないユーザーは/donateにリダイレクトされます。

私の最初の試みは、dom-ifテンプレートにそれらのルートへのリンクとその宣言をラップすることでした。これはユーザーにルートが表示されないようにするために機能しますが、ユーザーがログインしている場合は、アドレスバーからそのルートに移動することはできません。まず、アプリケーションのルートへのリンクをクリックする必要があります。これは混乱しています：「寄付」ページが表示されているにもかかわらず、アドレスバーに「スタッフ」と表示されることがあります。

<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation"> 
    <template is="dom-if" if="[[user]]" restamp="true"> 
    <a name="staff" href="/staff">Staff</a> 
    </template> 
    <a name="donate" href="/donate">Donate</a> 
</iron-selector> 

<iron-pages 
    selected="[[page]]" 
    attr-for-selected="name" 
    fallback-selection="donate" 
    role="main"> 
    <template is="dom-if" if="[[user]]" restamp="true"> 
    <ksybf-staff name="staff"></ksybf-staff> 
    </template> 
    <ksybf-donate name="donate" route="[[subroute]]"></ksybf-donate> 
</iron-pages> 

私はまた、命令的ルートの装填を防止しようとしました：

_routePageChanged: function(page) { 
    if (this.user) { 
    this.page = page || 'donate'; 
    } else { 
    this.page = 'donate'; 
    } 
}, 

これは、同様の結果が得られます。/staffへの最初のブラウジングは、アドレスバーが//app/staffを示していても、ルートを「寄付」ロードします。

ルートをユーザーの視点から保護するにはどうすればよいですか？

Answer 1

1. <iron-pages>にidを追加します。
2. リスナーをiron-selectに追加します。リスナー関数内
3. 、ユーザーがログインしていない場合にリダイレクトするようにロジックを追加

それは次のようになります。<iron-pages>用 を：

<iron-pages 
    id="selector" 
    selected="[[page]]" 
    attr-for-selected="name" 
    fallback-selection="donate" 
    role="main"> 
    <ksybf-staff name="staff"></ksybf-staff> 
    <ksybf-donate name="donate" route="[[subroute]]"></ksybf-donate> 
</iron-pages> 

リスナーを追加します。

listeners: { 
    'selector.iron-select': 'pageChanged' 
} 

と機能：

pageChanged: function(e){ 
    var page = this.$.selector.selected; 
    switch (page){ 
     case 'staff': 
      if (userIsNotLoggedIn){ 
       //Ideally, I would send a toast here saying that the user should be logged in 
       window.location.href = '/donate'     
      } 
    } 
} 

Answer 2

私がこれにアプローチする方法は、鉄ページの「選択された属性」を利用することです。

<iron-pages selected-attribute="active"> 

これにより、スタッフのアクティブな属性が設定され、ページが寄付されます。 スタッフコンポーネントのアクティブな属性にオブザーバーを使用し、アクティブな場合は=== trueのチェックを行います。彼らが認証されていない/許可されていない場合は、それらが所属する場所に戻すだけです。