全局使用Polymerfire身份验证

如果我有一个使用聚合力的firebase身份验证元素，在全局范围内使用用户属性，最佳方式是什么？全局使用Polymerfire身份验证

举例来说，如果我有一个登录按钮元素：我要显示或隐藏许多组件这样

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

来源

2017-04-07 hhwwww

你可以只添加'火力点，auth'元素任何你需要的值：'<火力-auth用户= “{{用户}}” >' –

从您的应用程序入口点（我的 - 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>

来源

2017-04-09 00:38:30

全局使用Polymerfire身份验证

回答

相关问题