Angular 13+NGRX+OAuth2实现Effect时类型不匹配报错

问题原因 #

报错核心在于oidcSecurityService.checkAuth()返回的不是你预期的布尔值，而是包含登录状态、用户信息等数据的LoginResponse对象，但你的checkAuthComplete动作定义的isLoggedIn参数要求是boolean类型，类型不匹配导致报错。

解决方案 #

你需要从LoginResponse对象中提取代表登录状态的布尔字段，再传给checkAuthComplete动作：

1. 确认字段名：不同版本的OIDC库返回的LoginResponse结构略有差异，常见的登录状态字段是isAuthenticated或isLoggedIn，可以先通过console.log(response)打印返回结果确认具体字段。
2. 修改Effects映射逻辑：
   调整auth.effects.ts里的map操作，从响应对象中提取正确的布尔值：

checkauth$ = createEffect(() =>
this.actions$.pipe(
  ofType(fromAuthActions.checkAuth),
  switchMap(() =>
    this.authService
      .checkAuth()
      .pipe(
        // 替换为你实际找到的登录状态字段名，比如isAuthenticated或isLoggedIn
        map((response) => fromAuthActions.checkAuthComplete({ isLoggedIn: response.isAuthenticated }))
      )
   )
 )
);

额外说明 #

你参考的是2020年的旧示例，当前使用的OIDC库版本可能已更新，返回结构和示例不一致，需根据当前库的实际返回结构调整字段提取逻辑。

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