Защита маршрутов в приложении Polymer Starter Kit

Question

Я использую Polymer Starter Kit и PolymireFire для создания приложения Firebase с двумя маршрутами: "персонал" и "пожертвовать". Маршрут пожертвований является общедоступным, а маршрут сотрудников - частным. Я бы хотел защитить маршрут персонала таким образом, чтобы вошли только те пользователи, у которых электронная почта заканчивается на mycompany.com может получить к нему доступ. Неаутентифицированные пользователи будут перенаправлены на /donate,

Моей первой попыткой было обернуть ссылки и объявления этих маршрутов в dom-if шаблоны. Это работает для того, чтобы пользователи не видели маршрут, но если пользователь вошел в систему, он не сможет перейти к этому маршруту из адресной строки - ему сначала нужно будет щелкнуть ссылку на маршрут в приложении. Это сбивает с толку: в адресной строке все равно может быть написано "сотрудники", даже если отображается страница "Пожертвовать".

<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

1. Добавить id на ваш <iron-pages>,
2. Добавить iron-select слушатель этого.
3. Внутри функции слушателя добавьте логику для перенаправления, если пользователь не вошел в систему.

Это будет выглядеть так: для <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">

Это установит активный атрибут в вашем штате и пожертвует страницы. Используйте наблюдателя для активного атрибута в вашем компоненте персонала, и если активен === true, тогда сделайте свою проверку. Если они не аутентифицированы / авторизованы, просто отбросьте их туда, где они принадлежат.