Question

所以我将Angular App连接到Okta登录功能。

以下是方案 - 以下是路线设置。当用户登陆该站点时，显示localhost home - 工作正常。用户单击Navbar上的“登录”按钮，重定向到Okta登录页面也可以。然后，用户输入凭据并成功验证重定向到localhost隐式/回调被触发，它现在应该显示localhost secureuserhome并停止，而是自动重定向到localhost home。此时，如果我按下浏览器后退按钮，我可以看到回调应该停止的secureuserhome页面。我需要一些帮助，为什么回调会重定向到主页而不仅仅是回调组件。

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  { path: 'home', component: ToolsComponent },
  { path: 'tool1lm', component: Tool1learnmoreComponent },
  { path: 'tool1try', component: Tool1trialComponent},
  { path: 'implicit/callback', redirectTo: '/secureuserhome', pathMatch: 'full'},
  { path: 'secureuserhome', component: SecureuserhomeComponent}
];

以下是app.component.html设置。

<app-navbar></app-navbar>
<br>
<p class = "lead text-center">{{headermessage}}</p>
<router-outlet></router-outlet>

secureuserhome模板如下所示。我的理解是当secureuserhome被调用时，这个html应该显示在路由器插座的位置以及上面的app组件html中的其他东西。

<!--Card-->
<div class="container">
<div class="card card-cascade">
    <!--Card image-->
    <div class="view gradient-card-header blue-gradient">
        <h2 class="h2-responsive">Hello!</h2>
        <p>I am Authenticated...</p>
    </div>
    <!--/Card image-->
    <!--Card content-->
    <div class="card-body text-center">
        <p class="card-text">Okta Login Successful</p>
    </div>
    <!--/.Card content-->
</div>
</div>
<!--/.Card-->

让我知道我应该提供任何其他代码片段或设置。

Answer 1

问题似乎与路由和重定向网址有关。我已经实现了Okta example，这就是我的路由看起来像

export function onAuthRequired({ oktaAuth, router }) {
  // Redirect the user to your custom login page
     router.navigate(['/login']);
}

const appRoutes: Routes = [
  {
    path: 'implicit/callback',
    component: OktaCallbackComponent
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [ OktaAuthGuard ],
    data: {
      onAuthRequired
    }
  }

希望这会有所帮助：）

隐式回调重定向到Angular组件，然后自动重定向到主页

1 个答案: