En mi aplicación Angular tengo esta función para dirigirme a la página de inicio de sesión:
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);Una de mis rutas es la siguiente:
const routes: Routes = [ { path: 'members', component: MembersPageComponent, canActivate: [ OktaAuthGuard ] }, ... ];y mi login.status.component.html contiene:
<button routerLink="/members" class="security-btn ml-1">Member</button>Cuando se hace clic en el botón Miembros, se debe dirigir al usuario a la página de inicio de sesión si aún no ha iniciado sesión. En mi aplicación, si se hace esto, no sucede nada visible en la página, pero la consola da este error:
ERROR Error: No capturado (en promesa): TypeError: commands.reduce no es una función computeNavigation@http://localhost:4200/vendor.js:53359:26 createUrlTree@http://localhost:4200/vendor.js:53291 :34 createUrlTree@http://localhost:4200/vendor.js:56121:16 navegar@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 cumplimentado@http://localhost:4200/vendor.js:140246:58 invocar@http://localhost:4200/polyfills.js:598:26 onInvoke@http:/ /localhost:4200/vendor.js:37134:33 invocar@http://localhost:4200/polyfills.js:597:52 ejecutar@http://localhost:4200/polyfills.js:360:43 scheduleResolveOrReject/<@ http://localhost:4200/polyfills.js:1502:36 invo keTask@http://localhost:4200/polyfills.js:632:31 onInvokeTask@http://localhost:4200/vendor.js:37121:33 invoqueTask@http://localhost:4200/polyfills.js:631: 60 ejecutarTarea@http://localhost:4200/polyfills.js:404:47 drenajeMicroTaskQueue@http://localhost:4200/polyfills.js:808:35 invocarTarea@http://localhost:4200/polyfills.js:717 :21 invocarTarea@http://localhost:4200/polyfills.js:1826:14 globalZoneAwareCallback@http://localhost:4200/polyfills.js:1852:27 Angular 11 resolvePromise resolvePromise calendarResolveOrReject invoqueTask onInvokeTask invokeTask runTask drenajeMicroTaskQueue invoqueTask invoqueTask globalZoneAwareCallback core .js:6479 Angular 3 RxJS 5 Angular 13
Creo que mi problema tiene algo que ver con la forma en que se pasan mis parámetros en mi función. ¿Estoy haciendo esto correctamente y, de ser así, qué estoy haciendo mal?
router.navigate('/login'); debería haber sido router.navigate(['/login']); .