全局使用Polymerfire身份驗證

Question

如果我有一個使用聚合力的firebase身份驗證元素，在全局範圍內使用用戶屬性，最佳方式是什麼？

舉例來說，如果我有一個登錄按鈕元素：我要顯示或隱藏許多組件這樣

<dom-module id="tab-b"> 
<template> 
    <style> 
    </style> 
<firebase-app auth-domain="example.firebaseapp.com" 
    database-url="example.firebaseio.com/" 
    api-key=""> 
</firebase-app> 
<firebase-auth id="auth" location="{{location}}" user="{{user}}"provider="google" on-error="handleError"> 
</firebase-auth> 

<paper-button id="googSignIn" class$="signInButton {{_getMiniClass()}}"on-tap="login" raised> 
    Google 
</paper-button> 

</template> 

<script> 
(function() { 
    'use strict'; 
    Polymer({ 
    is: 'tab-b', 

     properties:{ 

     user: { 
     type: Object 
     }, 

     statusKnown: { 
     type: Object 
     } 
     }, 

    login: function(){ 
     return this.$.auth.signInWithPopup(); 
    }, 

    logout: function(){ 
     return this.$.auth.signOut(); 
    } 
    }); 
})(); 
</script> 
</dom-module> 

然後：

<element show$={{!user}}><element> 

Answer 1

從您的應用程序入口點（我的 - app.html），將用戶值分配給一個對象。該對象的應用程序成爲掌管你的應用程序的狀態，你可以在任何財產給它

<!-- Firebase authentication --> 
<firebase-auth 
    id="auth" 
    user="{{app.user}}" 
    status-known="{{app.availability.available}}" 
    online="{{app.availability.isOnline}}" 
    signed-in="{{app.availability.userIsSignedIn}}" 
    provider="google"> 
</firebase-auth> 

添加到應用程序對象的詳細信息添加，例如顯示狀態。

<iron-media-query id="mq-phone" 
        full 
        query="(max-width:480px)" 
        query-matches="{{app.display.isPhoneSize}}"></iron-media-query> 
<iron-media-query id="mq-tablet" 
        full 
        query="(min-width:481px) and (max-width:840px)" 
        query-matches="{{app.display.isTabletSize}}"></iron-media-query> 
<iron-media-query id="mq-desktop" 
        query="(min-width:841px)" 
        query-matches="{{app.display.isDesktopSize}}"></iron-media-query> 

綁定的對象與其他元素

<!-- Drawer content --> 
    <app-drawer id="drawer" slot="drawer"> 
    <app-toolbar>Menu</app-toolbar> 
    <iron-selector selected="[[page]]" attr-for-selected="name" 
     class="drawer-list" role="navigation"> 
     <a name="view1" app="{{app}}" href="/view1">View One</a> 
     <a name="view2" app="{{app}}" href="/view2">View Two</a> 
     <a name="view3" app="{{app}}" href="/view3">View Three</a> 
    </iron-selector> 
    </app-drawer>