OktaAuth 在 Angular 站点中使用时不起作用

Question

在我的 Angular 应用程序中，我有这个功能可以定向到登录页面：

const oktaConfig = Object.assign({
  onAuthRequired: (oktaAuth: any, injector: { get: (arg0: any) => any; }) => {
    const router = injector.get(Router);

    // redirect the user to your custom login page
    router.navigate('/login');
  }
}, myAppConfig.oidc);

我的其中一条路线如下：

const routes: Routes = [
  { path: 'members', component: MembersPageComponent, canActivate: [ OktaAuthGuard ] },
...
];

我的 login.status.component.html 包含：

<button routerLink="/members" class="security-btn ml-1">Member</button>

单击“成员”按钮时，如果用户尚未登录，则应将其定向到登录页面。在我的应用程序中，如果完成此操作，页面上不会显示任何内容，但控制台会显示此错误：

ERROR Error: Uncaught (in promise): TypeError: commands.reduce is not a function computeNavigation@http://localhost:4200/vendor.js:53359:26 createUrlTree@http://localhost:4200/vendor.js:53291:34 createUrlTree@http://localhost:4200/vendor.js:56121:16 navigate@http://localhost:4200/vendor.js:56190:40 onAuthRequired@http://localhost:4200/main.js:160:16 handleLogin/<@http://localhost:4200/vendor.js:69640:31 __awaiter/<@http://localhost:4200/vendor.js:140249:71 ZoneAwarePromise@http://localhost:4200/polyfills.js:1613:29 __awaiter@http://localhost:4200/vendor.js:140245:12 handleLogin@http://localhost:4200/vendor.js:69633:64 canActivate/<@http://localhost:4200/vendor.js:69623:24 fulfilled@http://localhost:4200/vendor.js:140246:58 invoke@http://localhost:4200/polyfills.js:598:26 onInvoke@http://localhost:4200/vendor.js:37134:33 invoke@http://localhost:4200/polyfills.js:597:52 run@http://localhost:4200/polyfills.js:360:43 scheduleResolveOrReject/<@http://localhost:4200/polyfills.js:1502:36 invokeTask@http://localhost:4200/polyfills.js:632:31 onInvokeTask@http://localhost:4200/vendor.js:37121:33 invokeTask@http://localhost:4200/polyfills.js:631:60 runTask@http://localhost:4200/polyfills.js:404:47 drainMicroTaskQueue@http://localhost:4200/polyfills.js:808:35 invokeTask@http://localhost:4200/polyfills.js:717:21 invokeTask@http://localhost:4200/polyfills.js:1826:14 globalZoneAwareCallback@http://localhost:4200/polyfills.js:1852:27 Angular 11 resolvePromise resolvePromise scheduleResolveOrReject invokeTask onInvokeTask invokeTask runTask drainMicroTaskQueue invokeTask invokeTask globalZoneAwareCallback core.js:6479 Angular 3 RxJS 5 Angular 13

我认为我的问题与函数中传递参数的方式有关。我这样做是否正确？如果正确，我做错了什么？

Answer 1

router.navigate('/login'); 应该是 router.navigate(['/login']);。

OktaAuth 在 Angular 站点中使用时不起作用

OktaAuth not working when used in Angualr site

javascript

angular

typescript

okta

okta-api