Как использовать компонентный маршрутизатор AngularJS 1.5 в сочетании с аутентификацией пользователя?

Question

Я не совсем готов прыгнуть в Angular 2, но я хотел заняться их новым маршрутизатором и компонентами.

Для фона я использую экземпляр Python в Google App Engine, который использует Endpoints вместе с Angular.

Как использовать компонентный маршрутизатор AngularJS 1.5 для обслуживания html с и без аутентифицированного пользователя? Я хочу сделать это максимально «Угловым способом». Текущая документация потеряна для меня.

Answer 1

Недавно я боролся с тем же. Я решил так:

В объекте компоненты определения добавить $ canActivate свойства:

import { MainController } from './main.controller'; 

export class MainComponent { 

    constructor() { 
     this.controller = MainController; 
     this.templateUrl = 'app/main/main.html'; 
     this.$canActivate = (Auth) => { 
      'ngInject'; 

      return Auth.redirectUnauthenticated(); 
     }; 
    } 
} 

Создать службу проверки подлинности, который содержит всю информацию аутентификации:

export class AuthService { 

    constructor($auth, UserApi, $q, $rootRouter, Storage) { 
     'ngInject'; 

     this.$auth = $auth; 
     this.$q = $q; 
     this.$rootRouter = $rootRouter; 
     this.storage = Storage; 
     this.userApi = UserApi.resource; 
    } 

    /** 
    * Check user's status 
    */ 
    isAuthenticated() { 
     return this.$auth.isAuthenticated(); 
    } 

    /** 
    * Redirect user to login page if he is not authenticated 
    */ 
    redirectUnauthenticated() { 
     if (!this.$auth.isAuthenticated()) { 
      this.$rootRouter.navigate(['Login']); 

      return false; 
     } 

     return true; 
    } 
} 

ПРИМЕЧАНИЯ: $ службы аутентификации приходит от satellizer библиотека.

В принципе, в каждом компоненте (к которому вы можете перейти), где вам нужен только аутентифицированный доступ, установите одно и то же свойство $ canActivate. Я не уверен, что это самое приятное решение, но оно работает :)