1

問題が発生しました。Google で解決策が見つからないため、回答していただけると幸いです。現在、アプリケーションに Auth0 認証を実装しようとしています。

これを明確にするために、次のような App コンポーネントを作成しました。

アプリ コンポーネント

@Component({
selector: 'app',
template: `
<div>
    <div class="header wrapper">
        <header class="row">
            <div class="column small-12">
                <a href="/">
                    <img src="/assets/img/logo.svg" title="" />
                </a>
                <a class="navigation-toggle icon-menu hide-for-large-up" (click)="toggleMenuState()" ></a>
            </div>
        </header>
    </div>

    <router-outlet></router-outlet>

    <div class="footer wrapper">
        <footer class="row">
            <div class="column small-12">
                <div class="container">
                    <div class="icon icon-ship hide-for-medium-down"></div>
                </div>
            </div>
        </footer>
    </div>
</div>
`,
encapsulation: ViewEncapsulation.None,
directives: [ ROUTER_DIRECTIVES, RouterOutlet, AmendmentComponent, AmendmentAccountComponent ]
})

@RouteConfig([
    { path: '/amendment/...', name: 'Amendment', component:    AmendmentComponent, useAsDefault: true }    
])

routeConfig を追加したので、現在 URL は次のようになっています: localhost:3000/amendment

次に、次のような AmendmentComponent を作成しました。

@Component({
selector: 'amendment',
template: `  
        <div class="help wrapper">
            <div class="row">
                <ul class="column small-12">
                    <amendment-account></amendment-account>
                </ul>
            </div>
        </div>

        <div class="main-area wrapper">
            <div class="row">
                <router-outlet></router-outlet>
            </div>
        </div>
`,
encapsulation: ViewEncapsulation.None,
directives: [ CORE_DIRECTIVES, RouterOutlet, AmendmentAccountComponent, BookingsComponent, MainComponent, RegisterOrLoginComponent ],
styles: [`
    agent {
        display: block;
    }
`]
})
@RouteConfig([
    { path: '/amendment/', name: 'Bookings', component: BookingsComponent,  useAsDefault: true },
    { path: '/bookings', name: 'Bookings', component: BookingsComponent },
    { path: '/main/:id', name: 'Main', component: MainComponent },
    { path: '/main', redirectTo: ["Bookings"] },
])

HTML では、コンポーネント (AccountComponent) を読み込んでいることがわかります。このコンポーネントで Auth0 を処理しています。

AccountComponent html は次のようになります。

<li><a href="#" *ngIf="!loggedIn()" (click)="login()">Login</a></li>
<li><a href="#" *ngIf="loggedIn()" (click)="logout()">Logout</a></li>

私が作ろうとしているのは、Auth0 ボックスを localhost:3000/amendment/login Url にロードすることです。ログインHrefリンクをクリックすると、RouterConfigが原因でlocalhost:3000/amendment/bookingsにすばやく移動します:(

したがって、私の問題は、Auth0ログインボックスを停止してロードしないことです。一瞬それを見ることができ、その後リダイレクトされます。

これに対する解決策はありますか？

すべての routerConfig パスを削除すると機能することに注意してください。したがって、リダイレクトは発生しませんが、それは私にとっての解決策ではありません..

4

1 に答える 1

4

私は推測する

(click)="login(); false"

あなたが探しているものです。

于 2016-02-09T09:13:36.667 に答える