Question

我在父类中使用Polymerfire身份验证。成功验证后，我希望访问子类中的email属性。

问题：子类中没有身份验证信息。

我使用聚合物2.2.0。

这是父类：

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">

<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-loginparent">
   <template>
    <style include="shared-styles">
      :host { display: block; padding: 10px; }
    </style>

    <firebase-app
      auth-domain="....firebaseapp.com"
      database-url="....firebaseio.com/"
      api-key="..."
      storage-bucket="....."
      messaging-sender-id=".."
      project-id="..">
     </firebase-app>

     <firebase-auth 
       id="auth" 
       user="{{user}}" 
       provider="google"
       signed-in="{{signedIn}}"
       status-known="{{statusKnown}}"
       on-error="showError">
     </firebase-auth>

     <div class="card">
       <div hidden$="[[user]]">
         <h1>Login: Please select a login method</h1>
         <div class="error" hidden$="[[!error]]">[[error.code]]: [[error.message]]</div>

         <h3>b) Login with Google</h3>
         <p>
           <paper-button raised class="green" on-tap="mrLoginGoogle">Sign in with Google</paper-button>
         </p>
       </div>
     </div>
   </template>

<script type="text/javascript">
class MyLoginparent extends Polymer.Element {
  static get is() { return 'my-loginparent'; }

  static get properties() {
     return {
         user: { type: Object },
         loggedin: { type: String, value: 'no'}
     };
  }

  mrLoginGoogle() {
    this.error = null;
    this.authe = null;

    this.$.auth.signInWithPopup()
      .then(function (result)  {
         console.log('loginparent -> auth success: ' + result.user.email);   // Works
      })
      .catch(function (error) {
        console.log('loginparent -> auth fail: ' + error.code + "; " + error.message);
      });
   }
 }
window.customElements.define(MyLoginparent.is, MyLoginparent);

这是子类/子类：

<link rel="import" href="my-loginparent.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">


<dom-module id="my-edt">
  <template>
    <style include="shared-styles">
      :host { display: block; padding: 10px; }
    </style>

    <my-loginparent></my-loginparent>

    <app-location route="{{route}}"></app-location>
    <app-route route="{{route}}" pattern="/edt/:eid" data="{{routeData}}">
    </app-route>

    <h2>User: [[user.email]]</h2>
  </template>

  <script>
    class MyEdt extends MyLoginparent  {
    static get is() { return 'my-edt'; }

    constructor() {
      super();
    }

    ready() {
      super.ready();
      console.log("my-edt: ready: " + JSON.stringify(this.user) );  // result: undefined
      console.log("my-edt: super-ready loggedin: " + this.loggedin); // no  --> okay
    }
  }

  window.customElements.define(MyEdt.is, MyEdt);
</script>
</dom-module>

父类中的身份验证有效。

在子类中，console.log显示＆＃34; undefined＆＃34;并且没有显示h2 user.email中的值。

为了让这项工作需要改变什么？

演示：https://www.41max.com/edt

Answer 1

jdk中的console.log显示未定义，因为它在my-edt上被调用，然后用户才能按下按钮并添加凭据...

我看到了其他的事情：

您是否了解Firebase错误消息？

Firebase：名为“[DEFAULT]”的Firebase应用已存在（应用程序/重复的应用内）

在ready您忘记导入my-edt和app-location

Polymer 2.0：访问子类中的身份验证信息

1 个答案: