在 Polymer Starter Kit 应用程序中保护路由

Question

我正在使用 Polymer Starter Kit 和 polymerfire 创建一个具有两条路线的 firebase 应用程序：'staff' 和 'donate'。捐赠路线是 public，员工路线是私有的。我想保护员工路线，以便只有拥有以 mycompany.com 结尾的电子邮件的登录用户才能访问它。未经身份验证的用户将被重定向到 /donate.

我的第一次尝试是将 links 包装到 dom-if 模板中的那些路由的声明中。这可以防止用户看到路线，但如果用户已登录，他们将无法从地址栏导航到该路线 - 他们必须单击 link 到路线首先是应用程序。这令人困惑：即使显示了 'donate' 页面，地址栏仍可能显示 'staff'。

<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 会加载 'donate' 路由，即使地址栏显示 //app/staff.

我如何才能以仅从用户角度来看的方式保护路由？

Answer 1

我的方法是利用铁页的"selected-attribute"。

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

这将在您的员工和捐赠页面中设置活动属性。在 staff 组件的 active 属性上使用观察者，如果 active === true 则进行检查。如果他们不是 authenticated/authorized 那么就把他们踢回属于他们的地方。

Answer 2

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

在 Polymer Starter Kit 应用程序中保护路由

Protecting Routes in a Polymer Starter Kit App

routing

firebase

polymer-1.0

polymer-starter-kit

polymerfire