在启用了 routeConfig 的 angular2 中使用 Auth0答案

【问题标题】：using Auth0 in angular2 with routeConfig enabled在启用了 routeConfig 的 angular2 中使用 Auth0
【发布时间】：2016-05-19 04:38:48
【问题描述】：

我有一个问题，希望你们中的一些人能回答，因为我在谷歌上找不到解决方案。现在，我正在尝试对我的应用程序实施 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

然后我创建了一个如下所示的修正组件：

@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>

我要做的是在 localhost:3000/amendment/login Url 上加载 Auth0 框。这对我不起作用，因为当我单击登录 Href 链接时，由于 RouterConfig 会快速转到 localhost:3000/amendment/bookings :(

所以我的问题是它不会停止并加载 Auth0 登录框。我可以看到它一瞬间，然后它重定向我。

有什么解决办法吗？

请注意，如果我删除所有 routerConfig 路径，它会起作用，因此不会发生重定向，但这不是我的解决方案..

【问题讨论】：

标签： angular auth0

【解决方案1】：

我猜

(click)="login(); false"

就是你要找的。p>

【讨论】：

哇..这是一个简单的解决方案..你能解释一下它的作用吗？（停止重定向我猜）？？？
它禁用<a href="#"> 的默认行为，使其仅执行login()。如果事件处理程序返回 false，Angular 会在该事件上调用 event.preventDefault();。