Защита маршрутов в пакете Starter Kit

Question

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

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

<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, выполните свою проверку. Если они не аутентифицированы/авторизованы, просто отбросьте их обратно туда, где они принадлежат.