Firebase 聚合物起动器套件应用程序中的保护路线

我正在使用Polymer Starter工具包和polymerfire创建一个firebase应用程序，它有两条路线：“员工”和“捐赠”。捐赠路线为公共路线，员工路线为私人路线。我想保护员工路线，这样只有以

mycompany.com

结尾的电子邮件登录用户才能访问它。未经身份验证的用户将被重定向到

/捐赠

我的第一次尝试是在

dom if

模板中包装这些路由的链接和声明。这可以防止用户看到该路线，但如果用户登录，他们将无法从地址栏导航到该路线-他们必须先在应用程序中单击指向该路线的链接。这让人困惑：即使显示了“捐赠”页面，地址栏仍可能显示“员工”

我还尝试强制阻止路线装载：

\u routePageChanged:功能（第页）{
if（this.user）{
this.page=第| |页“捐赠”；
}否则{
this.page=‘捐赠’；
}
},

这会产生类似的结果：初始浏览

/staff

会加载“捐赠”路径，即使地址栏显示

//app/staff

---

如何从用户的角度保护路由？

我的方法是利用熨斗页面的“选定属性”

<iron-pages selected-attribute="active">

这将在您的员工和捐赠页面中设置活动属性。 在staff组件中的active属性上使用观察者，如果active==true，则进行检查。如果他们没有经过身份验证/授权，那么就把他们踢回属于他们的地方

将

id

添加到您的

中

向其添加一个

iron select

侦听器

在listener函数中，添加要重定向的逻辑，以防用户未登录

它看起来是这样的： 对于

：

以及功能：

pageChanged: function(e){
    var page = this.$.selector.selected;
    switch (page){
        case 'staff':
            if (userIsNotLoggedIn){
                //Ideally, I would send a toast here saying that the user should be logged in
                window.location.href = '/donate'                
            }
    }
}

我将使用

this.set（'route.path'，[route]）

而不是

window.location.href

。这样可以防止页面重新加载，而是使用SPA功能。

listeners: {
    'selector.iron-select': 'pageChanged'
}

pageChanged: function(e){
    var page = this.$.selector.selected;
    switch (page){
        case 'staff':
            if (userIsNotLoggedIn){
                //Ideally, I would send a toast here saying that the user should be logged in
                window.location.href = '/donate'                
            }
    }
}