Question

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

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

我的问题是我不想在验证之前加载我的javascript。

怎么可能这样做。

非常感谢

Answer 1

这取决于你是否使用firebase或聚合物包装，聚合物火焰。

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

// 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：如果为true，则可以通过检查用户属性
来确定登录状态
user：具有用户相关元数据的当前经过身份验证的用户。请参阅规范的firebase.User文档。

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 2

有几种选择。

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

Answer 3

如果仅仅是从视图中删除未登录页面的美学问题，您是否可以在用户未经过身份验证时隐藏页面（或显示某种叠加层）？

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

Answer 4

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

添加基于存储角色的授权（请参阅is there a way to authenticate user role in firebase storage rules?）
- 目前对硬编码的uid＆＃39;
在页面中，请求存储资源，如果成功将其包含在dom中（即添加src指向存储URL的脚本元素）
正常调用javascript

如何在使用Firebase和Polymer进行身份验证之前停止加载页面内容

4 个答案: