0
Ich schreibe eine Polymer-Web-Anwendung. Ich verwende Firebase zusammen mit Firebase-Auth für meine Datenbank und Authentifizierung.Polymer und firebase-auth
Ich habe ein Haupt app.html Element auf meiner Index-Seite mit einem benutzerdefinierten my-login Elemente, das erscheint, wenn Sie einen Login-Button klicken, der mein firebase-auth Element und Login-Logik enthält. Bisher konnte ich mich erfolgreich mit dem firebase-auth Element einloggen. Nach dem Anmelden mit dem Element my-login konnte ich jedoch nicht herausfinden, wie ich auf die Anmeldeinformationen auf meiner Seite index.html und auf allen anderen Seiten meiner App zugreifen kann.
Irgendeine Idee, wie man das macht? Ich kann online keine Beispiele für die Verwendung von Login-Informationen zu anderen Elementen als dem finden, das die firebase-auth enthält.
Hier ist meine app.html:
<dom-module id="my-app">
<link rel="import" type="css" href="../styles/app-theme.css">
<template>
<app-router style="display:none;">
<app-route path="/" import="/elements/blog.html"></app-route>
<app-route path="/artist" import="/elements/artist.html"></app-route>
<app-route path="/teacher" import="/elements/teacher.html"></app-route>
<app-route path="/research" import="/elements/research.html"></app-route>
<app-route path="/contact" import="/elements/contact.html"></app-route>
<app-route path="*" import="/elements/blog.html"></app-route>
</app-router>
<!-- Main Area -->
<paper-scroll-header-panel main fixed>
<!-- Main Toolbar -->
<paper-toolbar class="medium-tall">
<div class="">
<div class="app-name">Joyce K. Lee</div>
<span class="spacer"></span>
<paper-icon-button icon="account-circle" onclick="login.open()" hidden?="{{!statusKnown || user}}"></paper-icon-button>
<paper-icon-button icon="account-square" onclick="{{logout}}" hidden?="{{!statusKnown || !user}}"></paper-icon-button>
<template if="{{user}}">
{{user.password.username}}
</template>
</div>
<div class="bottom center fit">
<paper-tabs id="nav" selected="{{selected}}">
<paper-tab><a href="#/"><iron-icon icon="home"></iron-icon></a></paper-tab>
<paper-tab><a href="#/artist"><iron-icon icon="custom-icons:brush"></iron-icon></a></paper-tab>
<paper-tab><a href="#/teacher"><iron-icon icon="custom-icons:apple"></iron-icon></a></paper-tab>
<paper-tab><a href="#/research"><iron-icon icon="custom-icons:book"></iron-icon></a></paper-tab>
<paper-tab><a href="#/contact"><iron-icon icon="mail"></iron-icon></a></paper-tab>
</paper-tabs>
</div>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<neon-animated-pages style="height:100%" id="pages" class="flex" selected="{{selected}}" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<neon-animatable><my-blog></my-blog></neon-animatable>
<neon-animatable><my-artist></my-artist></neon-animatable>
<neon-animatable><my-teacher></my-teacher></neon-animatable>
<neon-animatable><my-research></my-research></neon-animatable>
<neon-animatable><my-contact></my-contact></neon-animatable>
</neon-animated-pages>
</div>
<simple-overlay id="login" with-backdrop>
<my-login></my-login>
</simple-overlay>
</paper-scroll-header-panel>
</template>
<script>
(function() {
Polymer({
is: 'my-app'
});
})();
</script>
</dom-module>
Hier ist meine Arbeits my-login Element:
<dom-module id="my-login">
<template>
<firebase-auth id="firebaseLogin" user="{{user}}" status-known="{{statusKnown}}" location="https://brilliant-inferno-6056.firebaseio.com" provider="password" on-error="errorHandler" on-user-created="userSuccessHandler" on-password-changed="userSuccessHandler" on-password-reset="userSuccessHandler" on-user-removed="userSuccessHandler"></firebase-auth>
<h4>Login</h4>
<paper-input label="Email" value="{{email::input}}"></paper-input>
<paper-input label="Password" type="password" value="{{password::input}}"></paper-input>
<paper-button on-tap="login" raised>Login</paper-button>
<br>
<div id="message">[[message]]</div>
<h3>Login status:</h3>
<p>{{computeLoginStatus(statusKnown, user)}}</p>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-login',
properties: {
message: {
type: String,
value: ''
},
email: {
type: String,
value: ''
},
password: {
type: String,
value: ''
},
user: {
type: Object,
value: null,
notify: true
},
statusKnown: {
type: Boolean,
notify: true
}
},
login: function() {
var params = {};
params.email = this.email;
params.password = this.password;
this.$.firebaseLogin.login(params);
},
logout: function() {
this.$.firebaseLogin.logout();
},
errorHandler: function (e) {
this.message = 'Error: ' + e.detail.message;
},
userSuccessHandler: function (e) {
this.message = e.type + ' success!';
},
createUserHandler: function (e) {
this.$.firebaseLogin.createUser(this.email, this.password);
},
changePasswordHandler: function (e) {
this.$.firebaseLogin.changePassword(this.email, this.password, this.newPassword);
},
resetPasswordHandler: function (e) {
this.$.firebaseLogin.sendPasswordResetEmail(this.email);
},
removeUserHandler: function (e) {
this.$.firebaseLogin.removeUser(this.email, this.password);
},
computeCreateUserDisabled: function (email, password) {
return !email || !password;
},
computeChangePasswordDisabled: function (email, password, newPassword) {
return !email || !password || !newPassword;
},
computeResetPasswordDisabled: function (email, password) {
return !email || !password;
},
computeRemoveUserDisabled: function (email, password) {
return !email || !password;
},
computeLoginHidden: function (statusKnown, user) {
return !statusKnown || !!user;
},
computeLogoutHidden: function (statusKnown, user) {
return !statusKnown || !user;
},
computeLoginStatus: function (statusKnown, user) {
if (statusKnown && user) {
return 'Logged in';
}
if (statusKnown) {
return 'Logged out';
}
return 'Unknown (checking status...)';
}
});
})();
</script>
</dom-module>