単一アプリの Polymer Web アプリの json データストアから Polymerfire に変更しました。私の Web アプリのすべてのデータは公開されており、1 人の管理者だけがデータを変更する必要があるため、すべてのページ データに対して 1 つのトップ ノードしかありません。
ログインには、パブリック プロバイダーで firebase-auth 要素を使用し、管理者に書き込み権限を与えるルールを設定しました。
しかし今、ログインしている管理者にフィードバックを提供して、ログインしていることを示す方法に苦労しています。そのために、データベースに 2 番目のトップノード (「isAdmin」) を追加しました。 、キーは「Admin」、ブール値は「true」です。私は firebase-document でそれにバインドし、次のように dom-if テンプレートで使用しようとしました:
<firebase-auth
id="auth"
user="{{user}}"
provider="google"
app-name="myApp"
signed-in="{{signedIn}}">
</firebase-auth>
<firebase-document
log
id="adminCheck"
app-name="myApp"
path="/isAdmin"
data="{{firebaseAdmin}}">
</firebase-document>
<paper-button raised on-tap="login" hidden="[[user]]">Log in</paper-button>
<paper-button raised on-tap="logout" hidden="[[!user]]">Log out</paper-button>
<template is="dom-if" if="[[firebaseAdmin.Admin]]" restamp>
<span>Hello [[user.displayName]]!</span>
</template>
ただし、ログインした管理者のみがノードを読み取ることができるため、ログイン後にブラウザを更新した場合にのみ、javascript で管理者の値が実際に変更されることはありません。したがって、次のように状態をログに記録しようとすると:
<script>
Polymer({
is: 'my-login',
properties: {
user: {
type: Object
},
firebaseAdmin: {
type: Object
},
},
_checkAdmin: function() {
var myVal = this.$.adminCheck.getStoredValue('/isAdmin');
console.log('Value for admin stored in firebase-document element: ' + myVal.Admin);
console.log('Polymer property for admin: ' + this.firebaseAdmin.Admin);
},
login: function() {
this.$.auth.signInWithPopup();
this._checkAdmin();
},
logout: function() {
this.$.auth.signOut();
this._checkAdmin();
}
});
</script>
私はいつも得ます:
Value for admin stored in firebase-document element: undefined
Polymer property for admin: undefined
ログインしていても、_checkAdmin 関数から戻ってきます。管理者ログイン後にページを更新したときにのみ、isAdmin ノードに格納されたオブジェクトを含む firebase-document からログを取得します。
Got stored value! Object {Admin: true}
、ログアウトしても、この値に固執するようになりました。私の_checkAdmin関数は、常にこれを記録します:
Value for admin stored in firebase-document element: undefined
Polymer property for admin: true
その後、さまざまなことを試みましたが失敗しましたが、これはログインしている管理者を確認する適切な方法ではないと思いますか? JavaScriptで直接uidをチェックする必要はないと思います。
プロが近くにいて、私を助けてくれると嬉しいです、アレックス
Michael Bleigh の助けのおかげで、次のように最終的に機能するようになりました。
<dom-module id="my-login">
<template>
<style>
span {
margin-left: 1rem;
}
paper-button {
background: -webkit-linear-gradient(#fff, #333 66%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<firebase-auth
id="auth"
user="{{user}}"
provider="google"
app-name="myApp"
signed-in="{{signedIn}}">
</firebase-auth>
<firebase-document
app-name="myApp"
path="/admins/[[user.uid]]"
data="{{isAdmin}}">
</firebase-document>
<paper-button raised on-tap="login" hidden="[[user]]">Log in</paper-button>
<paper-button raised on-tap="logout" hidden="[[!user]]">Log out</paper-button>
<template is="dom-if" if="[[admin]]" restamp>
<span hidden="[[!user]]">Hello [[user.displayName]]!</span>
</template>
</template>
<script>
Polymer({
is: 'my-login',
properties: {
user: {
type: Object
},
isAdmin: {
type: Object
},
admin: {
type: Boolean,
computed: '_checkAdmin(isAdmin)'
}
},
_checkAdmin: function(isAdmin) {
if (typeof isAdmin === 'boolean') {
console.log('Polymer property for admin is defined');
return true;
}
},
login: function() {
this.$.auth.signInWithPopup();
},
logout: function() {
this.$.auth.signOut();
}
});
</script>