Question

如果我使用polymerfire使用firebase auth元素，全局使用用户属性，那么最好的方法是什么？

例如，如果我有一个带登录按钮的元素：

<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

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

全局使用Polymerfire auth

1 个答案: