Question

我使用Polymer Starter Kit和polymerfire创建了一个具有两条路径的firebase应用程序：＆＃39; staff＆＃39;并捐赠＆＃39;。捐赠路线是公共的，工作人员路线是私人的。我希望保护员工路线，以便只有具有以mycompany.com结尾的电子邮件的登录用户才能访问它。未经身份验证的用户将被重定向至/donate。

我的第一次尝试是在dom-if模板中包含这些路由的链接和声明。这可以防止用户看到路线，但如果用户登录，他们将无法从地址栏导航到该路线 - 他们必须点击应用中路线的链接第一。这很令人困惑：地址栏可能仍然会说工作人员＆＃39;即使捐赠了＃39;页面显示。

<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
  <template is="dom-if" if="[[user]]" restamp="true">
    <a name="staff" href="/staff">Staff</a>
  </template>
  <a name="donate" href="/donate">Donate</a>
</iron-selector>

<iron-pages
    selected="[[page]]"
    attr-for-selected="name"
    fallback-selection="donate"
    role="main">
  <template is="dom-if" if="[[user]]" restamp="true">
    <ksybf-staff name="staff"></ksybf-staff>
  </template>
  <ksybf-donate name="donate" route="[[subroute]]"></ksybf-donate>
</iron-pages>

我也试图阻止路由加载：

_routePageChanged: function(page) {
  if (this.user) {
    this.page = page || 'donate';
  } else {
    this.page = 'donate';
  }
},

这会产生类似的结果：初次浏览到/staff会加载“捐赠”。路线，即使地址栏显示//app/staff。

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

Answer 1

将id添加到<iron-pages>。
为其添加iron-select侦听器。
在侦听器函数内部，添加逻辑以在用户未登录时重定向。

看起来像这样：对于<iron-pages>：

<iron-pages
    id="selector"
    selected="[[page]]"
    attr-for-selected="name"
    fallback-selection="donate"
    role="main">
  <ksybf-staff name="staff"></ksybf-staff>
  <ksybf-donate name="donate" route="[[subroute]]"></ksybf-donate>
</iron-pages>

添加监听器：

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

Answer 2

我如何处理这个问题是利用铁页的“选定属性”。

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

这将在您的员工中设置活动属性并捐赠页面。在staff组件中的active属性上使用观察者，如果激活=== true，则执行检查。如果他们未经过身份验证/授权，那么请将他们踢回原来的位置。

保护聚合物入门套件应用程序中的路由

2 个答案: