在使用 Angular 和 Okta 进行身份验证时,如果您的应用程序使用路由器的 useHash 属性来启用哈希路由,则需要一些特殊配置才能使用 redirectUrl。
您可以在 OktaAngularModule 的 forRoot 方法中设置一个回调函数,将其作为 AuthOptions 的一部分提供。这个回调函数将返回一个自定义的 redirectUrl,你可以在用户登录成功后使用它来重定向用户至任何需要的位置。
下面是一个示例代码:
import { OktaAuthModule, OktaCallbackComponent } from '@okta/okta-angular';
import { Router, RouterModule } from '@angular/router';
const oktaConfig = {
...
redirectUri: window.location.origin + '/implicit/callback',
postLogoutRedirectUri: window.location.origin + '/',
...
};
const routes = [
...
{ path: 'implicit/callback', component: OktaCallbackComponent },
...
];
@NgModule({
imports: [
RouterModule.forRoot(routes),
OktaAuthModule.forRoot({
url: 'https://yourOktaDomain.okta.com',
issuer: 'https://yourOktaDomain.okta.com/oauth2/default',
redirectUri: 'http://localhost:4200/implicit/callback',
clientId: 'yourClientId',
scope: 'openid profile email',
responseType: 'id_token token',
postLogoutRedirectUri: 'http://localhost:4200'
})
],
exports: [RouterModule]
})
export class AppRoutingModule {
constructor(private router: Router) {
this.router.initialNavigation(); // Manually triggering initial navigation for use with hash routing
}
}
@NgModule({
declarations: [
AppComponent
],
imports: [
...
AppRoutingModule
],
providers: [
{
provide: OKTA_CONFIG,
useValue: oktaConfig
},
{
provide: OKTA_AUTH_REQUIRED_CONFIG,
useValue: {
onAuthRequired: (oktaAuth, injector) => {
const router = injector.get(Router);
router.navigate(['/login']);
}
}
}
],
bootstrap: [AppComponent]
})
export