Angular站点使用OktaAuth时受保护路由跳转失败报错如何解决

你当前配置的错误核心是Router.navigate()方法的入参类型不符合Angular路由要求。
Angular官方定义的Router.navigate第一个参数为路由命令数组，而非单字符串。你直接传入字符串'/login'，框架内部执行commands.reduce逻辑时，由于字符串原型上不存在reduce方法，才会抛出该类型错误。

只需要将onAuthRequired回调中调用router.navigate的入参改为数组格式即可：

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

    // 入参改为数组格式
    router.navigate(['/login']);
  }
}, myAppConfig.oidc);

如果你偏好直接传入路由字符串作为参数，也可以改用Router.navigateByUrl方法：

// 第二种实现方式，使用navigateByUrl直接传入字符串路径
router.navigateByUrl('/login');

修改后重新启动服务，点击Member按钮触发路由守卫时，未登录状态会正常跳转到自定义登录页，控制台不会再抛出该类型错误。

内容的提问来源于stack exchange，提问作者runnerpaul