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

我从Polymer和Firebase开始，已经实现了GoogleOAuth认证

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

我的问题是，我不希望在验证之前加载javascript

这怎么可能呢

---

非常感谢

如果只是从视图中删除未登录页面的美观问题，您是否可以在用户未经身份验证时隐藏该页面（或显示某种覆盖）

---

我目前在一个当前项目中为一些元素设置了此选项：

hidden$=“{{！user}}”

有几个选项

将不希望加载的内容放在以“[[user]]”作为其驱动程序的dom if模板后面。这可能包括firebase元素，因此在登录之后才考虑数据库

如果用户未登录，则弹出一个模式对话框。我使用一个自定义会话元素来实现这一点。当覆盖显示时，页面的其余部分对任何内容都没有响应

---

这取决于您是否使用firebase或其聚合物包装材料polymerfire

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

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

要在不使用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
 }
}

---

我在这里编写代码时没有对代码进行测试，但我已经多次实现了相同的东西。

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

添加基于存储角色的授权（请参阅）

• 这确实有目前硬编码uid的限制

在页面中，请求存储资源，如果成功，则将其包括在dom中（即添加脚本元素，src指向存储url）

正常调用javascript

---

如果看不到再现问题的最小代码，就无法提供帮助。请看，任何简单的聚合物/firebase实施都会重现该问题。i、 e.遵循本教程，这里是我的测试实施没有美学问题，实际上停止了大部分内容，但我知道除了数据库之外，Firebase没有服务器端组件，这意味着如果没有经过身份验证就重定向到其他页面，如果没有内容首先进入浏览器，这可能不是一个选项。@kernowcode您找到解决方案了吗？我不敢相信这是一个问题，但是，我现在也遇到了同样的问题：我刚刚添加了我的答案，因为Firebase存储是一个与实时数据库不同的新添加。在经过身份验证之前，我不想要任何可发现的内容。我假设[[user]]只是一个开关，内容仍然是在检查之前下载的。这不是我想要的。无论如何，多谢。Polymer不会在元素后面加载内容，直到if第一次解析为true，才会使用dom if模板保护它。因此，在解决此问题之前，将不会显示任何内容。用户是应用程序的对象属性，会话管理器可以在用户登录后将其设置为某个属性。这怎么会不满足您的需要呢？可能是这样，但无论内容是否显示，都会被下载。我不希望在验证之前下载我的内容。”“下载”与“显示”不同非常感谢，这更像是。。。但是对于一个人来说，进入开发者工具（F12）并仅仅执行这两行代码是可能的吗？var resolvedPageUrl=this.resolveUrl（'user-scripts-lazy.html.html'）；this.importHref（resolvedPageUrl，null，this.onError，true）；是的，你可以这样做-一般来说，任何数据都是javascript，可以显示给任何用户。我认为任何实际的安全性都不应该再由JavaScript来实现了。这一切都应该通过服务器完成——使用firebase安全规则。如果您想“隐藏一些代码”给未设置服务器和端点的成员，请通过firebase custom auth对其进行身份验证，并仅在用户登录时返回一些代码。Firebase主机本身是静态的，所以你不能用它们来实现这一点-试试app engine-但隐蔽性安全不是好的做法。你可以将隐藏代码的URL存储在Firebase数据库中-保护它，以便只有你想要的用户可以访问该位数据，然后解决该问题-然后没有用户无法访问易于阅读的数据库

path='somepath'行
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);
 }
}

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
 }
}