我正在撰写聚合物网页应用程序。我正在使用firebase和firebase-auth进行数据库和身份验证。
我的索引页面上有一个主mysqli元素，当您单击包含我的mysql library元素和登录逻辑的登录按钮时，会弹出一个自定义app.html元素。到目前为止，我已经能够使用my-login元素成功登录。但是，在使用firebase-auth元素登录后，我无法弄清楚如何在我的index.html页面和我的应用程序中的所有其他页面上访问登录信息。
有关如何做到这一点的任何想法？我在网上找不到任何包含firebase-auth以外的元素的登录信息的例子。
这是我的my-login：
firebase-auth这是我工作的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>
答案 0 :(得分：0)
将my-login中的用户对象绑定到属性my-app。用户对象认为您可能没有掌握所需的所有内容，因此您很可能需要添加一个firebase文档来获取您需要的其他信息。同样适用，将该对象的结果与my-app中的用户绑定。
<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 user="{{user}}"></my-blog></neon-animatable>
<neon-animatable><my-artist user="{{user}}"></my-artist></neon-animatable>
<neon-animatable><my-teacher user="{{user}}"></my-teacher></neon-animatable>
<neon-animatable><my-research user="{{user}}"></my-research></neon-animatable>
<neon-animatable><my-contact user="{{user}}"></my-contact></neon-animatable>
</neon-animated-pages>
</div>
<simple-overlay id="login" with-backdrop>
<my-login user="{{user}}"></my-login>
</simple-overlay>
</paper-scroll-header-panel>
</template>
<script>
(function () {
Polymer({
is: 'my-app'
});
})();
</script>
答案 1 :(得分：0)
对于任何需要此功能的用户，如果您使用一个瞬间，则应在您的应用中共享用户对象，并且您应该能够通过say，user.uid在您的元素中访问该用户对象以获取用户的ID。只需在您的元素中粘贴一个。
将此内容放入index.html
<firebase-app
id="firApp"
name="AnyName"
api-key = "******************"
auth-domain = "**************"
database-url = "***************"
storage-bucket = "*****************"
messaging-sender-id = "************">
</firebase-app>
所以你的元素将是：
<dom-module id="my-view">
<template>
<style>
.....
</style>
<!-- user is null if no user -->
<firebase-auth
id="auth"
app-name="AnyName"
provider="facebook" ***for example
signed-in="{{signedIn}}"
user="{{user}}">
</firebase-auth>
<script>
Polymer({
is: 'my-view',
properties: {
signedIn: {
type: Boolean,
notify: true,
value: false
}
},
});
</script>
</dom-module>
您也可以为用户添加字符串属性并将其绑定到firebase-auth用户等。请记住导入polyfire.html并安装它（如果还没有）。干杯