Войти через API в Ioni c 6 - PullRequest
Новая
       132

Войти через API в Ioni c 6

0 голосов
/ 03 августа 2020 

## login.page.ts ##

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/services/auth/auth.service';
import { NavController } from '@ionic/angular';
import { AlertService } from 'src/services/alert/alert.service';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss']
})
export class LoginPage implements OnInit {

  constructor(
    private authService: AuthService,
    private navCtrl: NavController,
    private alertService: AlertService
  ) { }

  ngOnInit() {

  }

  onLogin(form: NgForm) {
    this.authService.login(form.value.username, form.value.password).subscribe(
      () => {
        this.alertService.presentToast("Logged In");
        this.navCtrl.navigateRoot('/welcome');
      },
      error => {
        console.log(error);
      },
      () => {
        this.alertService.presentToast("Failed");
        this.navCtrl.navigateRoot('/login');
      }
    );
  }

}
## login.page.scss ##

ion-content.background{
    --background: url(../../assets/img/staffandtruck.jpg) 0 0/100% 100% no-repeat;
}
## login.page.html ##

<ion-content padding class="background">

  <ion-card>
        <img src="assets/img/logo2.png"/>
    </ion-card>

    <ion-card>
      <ion-card-content>
        <form #form="ngForm" (ngSubmit)="onLogin(form)">

          <ion-item>
            <ion-icon slot="start" name="person-circle"></ion-icon>
              <ion-label position="floating">Staff ID</ion-label>
            <ion-input  type="email" name="username" ngModel required></ion-input>
          </ion-item>

          <ion-item>
            <ion-icon slot="start" name="key"></ion-icon>
              <ion-label position="floating">Password</ion-label>
            <ion-input type="password" name="password" ngModel required></ion-input>
          </ion-item>
          
            <ion-card-content>
              <ion-button expand="block" color="primary" type="submit">Log in</ion-button>
            </ion-card-content>
          
        </form>
      </ion-card-content>
    </ion-card>

</ion-content>

Я новичок здесь и новичок в Ioni c Framework. Кто-нибудь может помочь мне и научить меня, как создать логин с использованием API, который вызывает имя пользователя и пароль, не создавая Модель для User ? Я не знаю, как запустить и реализовать этот API. Это моя настройка среды для Ioni c. Настройка моей среды для Ioni c. Это для службы среды, которая вызывает API для входа в систему EnvService.ts . Это для службы аутентификации AuthService.ts . Но это все не работает, как я sh.

...