如何停止页面内容加载，直到使用 Firebase 和 Polymer 进行身份验证

Question

我开始使用 Polymer 和 Firebase 并实施了 Google OAuth 身份验证。

我注意到页面在身份验证之前加载，如果您单击后退，您可以在未经授权的情况下访问该页面，尽管您无法使用 firebase api 因此该页面不可用。

我的问题是我不希望我的 javascript 在通过身份验证之前加载。

这怎么可能。

非常感谢

Answer 1

如果从视图中删除 non-logged-in 页面只是一个美学问题，您可以在用户未通过身份验证时隐藏该页面（或显示某种叠加层）吗？

我目前在当前项目中有一些元素：hidden$="{{!user}}"

Answer 2

有几个选项。

将您不想加载的内容放在 dom-if 模板后面，以“[[user]]”作为其驱动程序。这可能包括您的 firebase 元素，因此在登录之前甚至不会考虑数据库。
如果用户未登录，则显示模式对话框。我使用自定义会话元素来执行此操作。当叠加层显示时，页面的其余部分对任何内容都没有响应。

Answer 3

这取决于您使用的是 firebase 还是他们的聚合物包装器 polymerfire。

为所有要有条件加载的导入创建一个文档

// user-scripts-lazy.html
<link rel="import" href="user-script-one.html">
<script src="script.js"></script>
// etc

使用Polymerfire 在承载 <firebase-auth> 的元素中创建一个观察者，您将从 firebase-auth 公开一些变量。

<firebase-auth
     user="{{user}}" 
     status-known="{{statusKnown}}"></firebase-auth>

在观察者中，观察用户元素和已知状态

statusKnown: When true, login status can be determined by checking user property

user: The currently-authenticated user with user-related metadata. See the firebase.User documentation for the spec.

observers:[
'_userStateKnown(user, statusKnown)'
]

_userStateKnown: function(user, status) {
 if(status && user) {
  // The status is known and the user has logged in
  // so load the files here - using the lazy load method
  var resolvedPageUrl = this.resolveUrl('user-scripts-lazy.html.html');
  this.importHref(resolvedPageUrl, null, this.onError, true);
 }
}

要在不使用 polymerfire 的情况下获取状态，您可以使用 onAuthStateChange

properties: {
  user: {
    type: Object,
    value: null // important to initialise to null
  }
}

..

ready: function() {
 firebase.auth().onAuthStateChagned(function(user) {
  if(user) 
    this.set('user', user); // when a user is logged in set their firebase user variable to ser
  else 
    this.set('user', false); // when no user is logged in set user to false


 }.bind(this)); // bind the Polymer scope to the onAuthStateChanged function 
}

// set an observer in the element
observers: [
 '_userChanged(user)'
],

_userChanged: function(user) {
 if(user === null) {
  // authStatus is false, the authStateChagned function hasn't returned yet. Do nothing
  return;
 }
 if(user) {
  // user has been signed in
  // lazy load the same as before
 } else {
  // no user is signed in
 }
}

我在这里编写代码时没有测试过它，但我已经多次实现了同样的事情。

Answer 4

我已经确定了适合我的目的的解决方案...

添加基于存储角色的授权（参见
）
- 目前硬编码 uid 确实有限制
在页面中，请求存储资源，如果成功则将其包含在 dom 中（即添加脚本元素，其中 src 指向存储 url）
正常呼叫javascript

如何停止页面内容加载，直到使用 Firebase 和 Polymer 进行身份验证

How to stop page content load until authenticated using Firebase and Polymer

authentication

oauth

firebase

polymer

polymer-1.0