Блог

У меня возникли некоторые проблемы с JWT-AUTH на WordPress с моим ионным приложением. Я смотрел серию обучающих программ на YouTube для создания ионного приложения с WordPress и woocommerce. Я загрузил код и интегрировал большую его часть в свое собственное приложение, однако вход в систему доставляет мне некоторое беспокойство.

Я протестировал запросы аутентификации JWT, и я получаю действительный токен, поэтому я не считаю, что проблема связана с плагином. Он также сохраняется в кеше, который предназначен. Несмотря на это, проблема все еще остается.

Во-первых, когда я вхожу в систему, моей переменной authState устанавливается значение true, даже с совершенно случайными учетными данными. Тестирование с помощью insomnia, и те же самые данные дают ожидаемую ошибку 403.

Я думаю, что корень проблемы — неверное значение authState, для которого неверно установлено значение true. Я все еще начинающий программист, поэтому я понимаю код, и я думаю, что он должен работать, но, очевидно, это не так. Я думаю, что понимаю ошибку, но не знаю, что ее вызывает. Надеюсь, я предоставил правильный код и всю информацию.

login.page.ts

   ngOnInit() {
    this.returnUrl = this.route.snapshot.queryParams.returnUrl || null;
    this.authService.authState$.subscribe((state) => {
      this.authState = state;
      console.log(this.authState);
      if (this.authState) {
        if (this.returnUrl !== null) {
          this.router.navigateByUrl(this.returnUrl).then();
        } else {
          this.router.navigateByUrl("/").then();
        }
      }
    });
  }

  login(loginForm: NgForm) {
    if (loginForm.invalid) {
      return;
    } else {
      const { email, password } = loginForm.value;
      this.authService.login(email, password).then();
    }
  }
 

auth.service.ts

   async login(username: string, password: string) {
    this.returnUrl = this.route.snapshot.queryParams.returnUrl;
    const headers = new HttpHeaders().set(SkipInterceptor, "");
    const loader = await this.loadingController.create({
      animated: true,
      backdropDismiss: true,
      message: "Authenticating Account",
      spinner: "crescent",
      id: "auth",
    });

    await loader.present().then();

    if (!this.currentAuthState) {
      this.httpClient
        .post(`${this.WP_AUTH_URL}`, { username, password }, { headers })
        .subscribe(
          async (data: AuthResponse) => {
            await loader.dismiss().then();
            if (data.token !== null) {
              this.storage.set("data", { ...data }).then((resp) => {
                this.currentAuthState = true;
                this.authState$.next(this.currentAuthState);
                this.fetchUserDetails(data.user_email)
                  .toPromise()
                  .then((user: CustomerModel) => {
                    this.storage.set("user", user);
                    console.log(user);
                    this.router.navigate([this.returnUrl]).then();
                  });
              });
            } else {
              this.currentAuthState = false;
              this.authState$.next(this.currentAuthState);
            }
          },
          async (err: ErrorResponse) => {
            await loader.dismiss().then();
            this.currentAuthState = false;
            this.authState$.next(this.currentAuthState);
            if (err instanceof HttpErrorResponse) {
              if (err.status === 403) {
                const alert = await this.alertController.create({
                  message: "Bad Username Or Password",
                  buttons: [
                    {
                      role: "cancel",
                      text: "Ok",
                    },
                  ],
                  header: "Authentication Failed",
                });

                await alert.present().then();
              } else {
                const alert = await this.alertController.create({
                  message: err.statusText,
                  buttons: [
                    {
                      role: "cancel",
                      text: "Ok",
                    },
                  ],
                  header: "Authentication Failed",
                });

                await alert.present().then();
              }
            }
          }
        );
    } else {
      await loader.dismiss().then();
      this.router.navigateByUrl("/").then();
      return;
    }
  }


 

Теперь эта часть кода возвращает неопределенное электронное письмо, которое, как я полагаю, вызвано ответом об ошибке при входе в систему, что приводит к неудачной попытке входа в систему (хотя учетные данные для входа сохраняются)
Кроме того, если я выполняю точно такой же (ну, то, что я считаю точно таким же) запрос в insomnia и вручную отправляю электронное письмо, я получаю пустой массив.

auth.service.ts

   private fetchUserDetails(email: string) {
    return this.httpClient
      .get(`${this.serverUrl}/customers?email=${email}`)
      .pipe(take(1));
  }
 

ошибка консоли для вышеуказанного. Я думаю, что это вызвано неправильным ответом сервера?

Исправлено! Оказывается, мой код все-таки был действительно правильным. После того, как идеи быстро иссякли, я начал изучать плагины. Плагин JWT auth, который я использовал, успешно отправлял токен, однако по какой-то причине он не работал. Заменил плагин JWT auth на WordPress, и он мгновенно заработал.