Angular 6, Подписаться и вернуть Observable <boolean>

Question

Я новичок в Angular здесь, и тренируюсь в Angular 6 с .Net Core. У меня это работало в начале недели, и я не уверен, где это сломал. Я написал службу аутентификации, которая работает, она вызывает контроллер и возвращает пользователя, но в компоненте, который вызывает службу, я не могу получить подписку на вызов router.navigate. Я просто не совсем понимаю, как использовать Observable, или мне это нужно здесь. Он работал нормально, пока я не добавил localStorage и не написал куки.

Я пытался удалить новый материал, который я добавил, но без изменений. компонент не будет обрабатывать результат для навигации. При подписке у меня был результат .subscribe(_result => this.router.navigate(['/admin/dashboard']), но я получил сообщение об ошибке машинописного текста. Поэтому я удалил его.

Мой компонент входа, а следующий блок - мой Auth.Service, который выполняет вызов http.post.

onSubmit() {

    this.authService.Authenticate(this.model)
        .pipe(first())
        .subscribe(
        _data => {                
            this.router.navigate(['/admin/dashboard'])
        },
        error => {
            console.log('Authentication process failed')
            this.model.Error = error;
            this.authFailure = true;
        }
    );

}

    Authenticate(signIn: SignIn) {

    let authenticateUrl = this.configuration.Server + 'api/auth/Authenticate';
    const toSignIn = JSON.stringify(signIn);

    return this.http.post<SignIn>(authenticateUrl, toSignIn, { headers: this.headers })
        .pipe(
            map(result => {
            if (result && result.Token) { 
                // Store user details and the jwt token
                localStorage.setItem('accessToken', result.Token);
                localStorage.setItem('userName', result.Username);
                localStorage.setItem('name', result.Firstname + ' ' + result.Lastname);
                this.authCookie.writeAuthCookies(result);                    
            }
            return result;
        })
    );
}

canActivate(_next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    if (this.cookieAuth.readTokenOrCookie() === false) {

        // Redirect the request to signIn
        this.router.navigate(['/home/signin'], { queryParams: { return: state.url } });
        return false;
    }

    return true;        
}

Answer 1

Плохо, все работало правильно, но навигация была настолько быстрой, что я ее не видел. Поэтому он перешел на панель инструментов, но мой authGuard отклонил запрос и перенаправил обратно на вход, так что это выглядело так, как будто ничего не произошло.

[решено], и у меня есть более четкое представление о том, как работает Observable.

Answer 2

Вы не обрабатывали блок else внутри службы аутентификации и зачем нам нужен pipe (first ())?

onSubmit() {
    console.log('Calling Authentication Service');
    this.authService.Authenticate(this.model)
      .subscribe((valid) => this._router.navigate(['/admin/dashboard']),
        _error => {
          console.log('Authentication process failed')
          this.model.Error = 'Authentication Failed';
          this.authFailure = true;
        }
      );

    Authenticate(signIn: SignIn): Observable < boolean > {
      let authenticateUrl = this.configuration.Server + 'api/auth/Authenticate';
      const toSignIn = JSON.stringify(signIn);
      return this.http.post < SignIn > (authenticateUrl, toSignIn, {
          headers: this.headers
        })
        .pipe(
          map(result => {
            if (result && result.Token) {
              console.log('AuthService, We have a valid response and token');
              // Store user details and the jwt token
              localStorage.setItem('accessToken', result.Token);
              localStorage.setItem('userName', result.Username);
              localStorage.setItem('name', result.Firstname + ' ' + result.Lastname);
              this.authCookie.writeAuthCookies(result);

              // For Debuging purposes
              console.log('Authenticate Complete, promise Observable');
              return true;
            }else{
              return false;
            }
          }),
          catchError((err, caught) => {
            return Observable.throw(new Error('App Error'));
          })
        );
    }