如何使用 angular pipe 并在请求调用中正确订阅

Question

在我的 angular 应用程序中，我向后端发送请求以检查凭据，成功后后端发送一个我读取的令牌。 到目前为止，这是有效的，但我必须使用 pipe 将它变成 map 到一个方法，然后使其工作。 但我现在的问题是，即使我从服务器获得 200，我的页面也不会自动导航到受保护的页面。 如果我手动输入 url 它会起作用，这就是我尝试过的：

  authenticateUser(login: LoginModel){
    this.http = new HttpClient(this.handler)
    return this.http.post<JwtToken>(environment.rootUrl + 'api/authenticate', {
      username: login.username,
      password: login.password,
    }).pipe(map(response => this.authenticateSuccess(response)))
      .subscribe({
        next: () => {
          this.isAuthenticated = true;
          this.router.navigate(['/dashboard'])
        }, error: (error) => {
          this.isAuthenticated = false;
          console.log(error)
        }
      })

  }

它在pipe之后没有进入订阅部分。有什么办法可以使这个工作吗？ 我仍然希望有一个错误处理，如果没有错误则导航到 url 如果错误不导航。

编辑：

验证成功方法：

  isUserLoggedIn(){
    return !! localStorage.getItem('authenticationToken')
  }

  private authenticateSuccess(response: JwtToken): void {
      const jwt = response.id_token;
      localStorage.setItem('authenticationToken' , jwt)
      this.localStorageService.store('authenticationToken', jwt);
      console.log(this.localStorageService.retrieve('authenticationToken'))
      this.sessionStorageService.clear('authenticationToken');

  }

授权卫士：

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(
    private auth: AuthenticationService,
    private router: Router
  ) {
  }

  canActivate(): Promise<boolean> {
    return new Promise(resolve => {
      if (this.auth.isUserLoggedIn()) {
        resolve(true)
      } else {
        this.router.navigate(['authenticate'])
        resolve(false)
      }
    })

  }
}

解决方案：

 authenticateUser(login: LoginModel) {
    this.http = new HttpClient(this.handler)
    return this.http.post<JwtToken>(environment.rootUrl + 'api/authenticate', {
      username: login.username,
      password: login.password,
    }).subscribe({
      next: response => {
        this.isAuthenticated = true;
        this.authenticateSuccess(response)
        this.router.navigate(['/dashboard'])
      }, error: (err) => {
        console.log(err)
      }, complete: () => {
        console.log("finished without worry")
      }
    })
  }

Answer 1

RxJs map运算符应该修改可观察对象的内容。 然而， map运算符需要返回相同的可观察值或另一个可观察值，以便下一个subscribe操作能够 function。

在您的情况下，您的map运算符根本不返回任何可观察值，因此没有理由触发subscribe方法。

您可以在此处的方法中再次简单地返回response

private authenticateSuccess(response: JwtToken): any {
      const jwt = response.id_token;
      localStorage.setItem('authenticationToken' , jwt)
      this.localStorageService.store('authenticationToken', jwt);
      console.log(this.localStorageService.retrieve('authenticationToken'))
      this.sessionStorageService.clear('authenticationToken');
      return response;
  }

但我认为map方法的所有代码直接在subscribe方法中匹配得更好。