AngularJS 1.5のコンポーネントルーターをユーザー認証と組み合わせて使用​​するにはどうすればよいですか？

Question

私はAngular 2に飛び込む準備が整っていませんが、私は新しいルータとコンポーネントに取り組みたいと思っていました。

バックグラウンドでは、Google App EngineでPythonインスタンスを使用しています。このアプリケーションでは、Endpointを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プロパティを設定します。私はこれが一番いい解決策であるかどうかは分かりませんが、うまくいきます:)