Polymerfire auth globally 사용

Question

generic 속성을 사용하기 위해 polymerfire를 사용하는 firebase 인증 요소가있는 경우 가장 좋은 방법은 무엇입니까? 예를 들어

내가 로그인 버튼 요소가있는 경우 : I 표시하거나이 같은 많은 구성 요소를 숨기려면 다음

<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> 

바인드 당신은 단지`중포 기지-auth` 요소를 추가 할 수있는 다른 요소

<!-- 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>