[解決済み] Angularによるログインページへのリダイレクト

質問

私はAsp.Net MVCの世界から来たのですが、認証されていないページにアクセスしようとするユーザは、自動的にログインページにリダイレクトされます。

私は、この動作をAngularで再現しようとしています。CanActivateデコレーターに出会いましたが、その結果、コンポーネントはまったくレンダリングされず、リダイレクトもされません。

私の質問は以下の通りです。

• Angularはこの動作を実現する方法を提供していますか？
• もしそうなら、どのように？それは良い習慣ですか？
• そうでない場合、Angularでユーザー認証を処理するためのベストプラクティスは何でしょうか？

どのように解決するのですか？

更新しました。 フルスケルトンを公開しました OAuth2 を統合した Angular 2 プロジェクト をGithubで公開しています。このプロジェクトでは、下記のディレクティブが実際に動作しています。

これを実現するひとつの方法は directive . Angular 2とは異なり components とは異なり、基本的に新しい HTML タグ (関連するコード付き) をページに挿入するものです。 ドキュメントはこちら .

カスタム属性が存在すると、ディレクティブを配置したコンポーネント（または HTML 要素）に何かが起こります。 私が現在使用しているAngular2/OAuth2アプリケーションで使用しているこのディレクティブを考えてみましょう。

import {Directive, OnDestroy} from 'angular2/core';
import {AuthService} from '../services/auth.service';
import {ROUTER_DIRECTIVES, Router, Location} from "angular2/router";

@Directive({
    selector: '[protected]'
})
export class ProtectedDirective implements OnDestroy {
    private sub:any = null;

    constructor(private authService:AuthService, private router:Router, private location:Location) {
        if (!authService.isAuthenticated()) {
            this.location.replaceState('/'); // clears browser history so they can't navigate with back button
            this.router.navigate(['PublicPage']);
        }

        this.sub = this.authService.subscribe((val) => {
            if (!val.authenticated) {
                this.location.replaceState('/'); // clears browser history so they can't navigate with back button
                this.router.navigate(['LoggedoutPage']); // tells them they've been logged out (somehow)
            }
        });
    }

    ngOnDestroy() {
        if (this.sub != null) {
            this.sub.unsubscribe();
        }
    }
}

これは、私が書いたAuthenticationサービスを利用して、ユーザーが既にログインしているかどうかを判断して も購読しています。 を購読し、ログアウトやタイムアウトしたユーザを追い出すことができるようにします。

同じようなことができます。 ユーザーが認証されていることを示す必要なクッキーやその他の状態情報の存在をチェックする、私のようなディレクティブを作成するのです。 もし、あなたが探しているフラグがなければ、（私のように）メインの公開ページかOAuth2サーバー（またはその他）にユーザーをリダイレクトします。 このディレクティブ属性は、保護が必要なコンポーネントに付けます。 この場合、それは protected のようにします。

<members-only-info [protected]></members-only-info>

次に、ユーザーをアプリ内のログインビューに移動/リダイレクトし、そこで認証を処理したいと思います。 そのためには、現在のルートを変更する必要があります。 その場合、依存性注入を使って ルーターオブジェクト をディレクティブの constructor() 関数で指定し navigate() メソッドを使用して、ユーザーをログインページに送ります (上の例のように)。

を制御する一連のルートがどこかにあると仮定します。 <router-outlet> タグを制御する一連のルートがあると仮定します。

@RouteConfig([
    {path: '/loggedout', name: 'LoggedoutPage', component: LoggedoutPageComponent, useAsDefault: true},
    {path: '/public', name: 'PublicPage', component: PublicPageComponent},
    {path: '/protected', name: 'ProtectedPage', component: ProtectedPageComponent}
])

代わりに、ユーザを 外部 URL、例えば OAuth2 サーバにリダイレクトさせたい場合は、 ディレクティブに以下のようなことをさせるでしょう。

window.location.href="https://myserver.com/oauth2/authorize?redirect_uri=http://myAppServer.com/myAngular2App/callback&response_type=code&client_id=clientId&scope=my_scope