Angular 无法读取未定义的属性 'navigate'

Question

我在点击“/home”时遇到错误url:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'navigate' of undefined
TypeError: Cannot read property 'navigate' of undefined
    at onAuthRequired (main.js:83)
    at OktaAuthGuard.<anonymous> (vendor.js:77444)

当我尝试使用 OktaAuthGuard 并自定义 onAuthRequired 函数时：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeComponent} from './home/home.component';
import {OktaCallbackComponent, OktaAuthGuard } from '@okta/okta-angular';
import { LoginComponent } from './login.component';

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

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full', canActivate: [OktaAuthGuard], data: {
      onAuthRequired
    }
  },
  {path: 'home', component: HomeComponent, canActivate: [OktaAuthGuard], data: {
      onAuthRequired
    }
  },
  {path: 'login', component: LoginComponent },
  {path: 'callback', component: OktaCallbackComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

实际上，我在另一个项目中使用了相同的代码片段，它没有抛出错误，但是这里为什么会导致错误？

我正在使用 Spring boot 作为后端。

Answer 1

您需要通过注入器获取路由器服务：

  // Use injector to access any service available within your application
  const router = injector.get(Router);

所以在你的函数中它会给出：

export function onAuthRequired(oktaAuth, injector) {
  const router = injector.get(Router);
  router.navigate(['/login']);
}

完整示例在这里：https://github.com/okta/okta-angular#using-a-custom-login-page

Answer 2

当然，'router'是未定义的，因为它没有被声明，你必须将它注入到构造函数中：

import { Router } from '@angular/router';
//.....
  constructor(private router: Router) {}
// then you can use 
this.router.navigate(['/login']);

Angular 无法读取未定义的属性 'navigate'

Angular Cannot read property 'navigate' of undefined

javascript

spring-boot

okta

angular

Angular 无法读取未定义的 属性 'navigate'

Angular Cannot read property 'navigate' of undefined

javascript

spring-boot

okta

angular

Angular 无法读取未定义的属性 'navigate'