Angular无法读取未定义的属性“导航”答案

【问题标题】：Angular Cannot read property 'navigate' of undefinedAngular无法读取未定义的属性“导航”
【发布时间】：2020-09-26 02:12:02
【问题描述】：

我在点击“/home”网址时遇到了错误：

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 { }

其实我在另一个项目中使用了同样的sn-p的代码，没有报错，但是这里为什么会报错呢？

我使用 Spring boot 作为后端。

【问题讨论】：

angular.io/guide/router#fetch-data-before-navigating

标签： javascript angular spring-boot okta

【解决方案1】：

你需要通过注入器获取Router服务：

  // 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

【讨论】：

【解决方案2】：

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

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

【讨论】：