Как изменить authSerivce, используя карту, которая должна возвращать наблюдаемые из старой версии angular? - PullRequest
Новая
       24

Как изменить authSerivce, используя карту, которая должна возвращать наблюдаемые из старой версии angular?

0 голосов
/ 16 апреля 2020

Я следовал руководству от https://fullstackmark.com/post/13/jwt-authentication-with-aspnet-core-2-web-api-angular-5-net-core-identity-and-facebook-login

, вы можете взглянуть на него, он хорошо написан, но использовал старую версию angular, и я использую Angular 8. Когда я следовал за руководством, я получил ошибку от auth service, что map does not exist on type Observable. ТАК я пытался поставить pipe но все равно получаю ошибку. Что я сделал не так и есть ли здесь решение?

authservice 

    login(userName, password) {
        let headers = new HttpHeaders();
        headers.append('Content-Type', 'application/json');

        return this.http
          .post(
          this.baseUrl + '/auth/login',
          JSON.stringify({ userName, password }),{ headers }
          ) 
          .map(res => res.json())
          .map(res => {
            localStorage.setItem('auth_token', res.auth_token);
            this.loggedIn = true;
            this._authNavStatusSource.next(true);
            return true;
          })
          .catch(this.handleError);
      }

логин OnSubmit 

    submit() {
        const controls = this.loginForm.controls;
        /** check form */
        if (this.loginForm.invalid) {
            Object.keys(controls).forEach((controlName) =>
                controls[controlName].markAsTouched()
            );
            return;
        }

        this.loading = true;

        const authData = {
            username: controls.username.value,
            password: controls.password.value,
        };

        this.isRequesting = true;
        this.auth
            .login(authData.username, authData.password)
            .finally(() => (this.isRequesting = false))
            .subscribe(
                (result) => {
                    if (result) {
                        this.router.navigate(["/dashboard"]);
                    }
                },
                (error) => (this.errors = error)
            );

1 Ответ

0 голосов
/ 16 апреля 2020
  1. У вас есть новая версия Rx Js, чем в примере. Нужно использовать pipe .
  2. Вместо catch вам нужно catchError

Пример: 

 login(userName, password) {
    let headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');

    return this.http
      .post(
      this.baseUrl + '/auth/login',
      JSON.stringify({ userName, password }),{ headers }
      )
      .pipe(
          map(res => res.json()),
          map(res => {
              localStorage.setItem('auth_token', res.auth_token);
              this.loggedIn = true;
              this._authNavStatusSource.next(true);
              return true;
          }),
          catchError(this.handleError)
      )
  }

Я не уверен, что приведенный выше код будет работать для вас, поскольку я не знаю, что такое this.handleError .

PsЕсли вы используете angular 8 , затем измените Http на HttpSlient ( Http - устарел )

...