离子中的身份验证（ver
#laravel #mysql #ionic

在prvej časti中，有关可以打电话和äO的事实（如果是部分）返回。
在druhej časti中，该过程是如何在Ionic（Ver.5）应用程序中创建“注册”功能的方法。

在这一部分中，我们创建了“失败”的功能。
在服务“ auth”（tj.vsãfor”中。 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../models/user';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  private url = 'http://127.0.0.1:8000/api';

  constructor(
    private http: HttpClient
  ) { }

  // registracia noveho pouzivatela:
  register(user: User) {
    return this.http.post(`${this.url}/register`, user);
  }
  // login existujuceho pouzivatela:
  login(credentials: User): Observable<string> {
    return this.http.post<{access_token: string}>(`${this.url}/login`, credentials).pipe(
      map(response => response.access_token)
    );
  }
}

现在，将“登录”调整为布局带“ login.page.html”您添加kpu：

<ion-header>
  <ion-toolbar>
    <ion-title>Login</ion-title>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="home"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <form [formGroup]="form" (submit)="onSubmit()">
    <ion-item>
      <ion-label position="floating">Email:</ion-label>
      <ion-input type="text" required formControlName="email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Password:</ion-label>
      <ion-input type="password" required formControlName="password"></ion-input>
    </ion-item>
    <ion-button type="submit" class="ion-margin-top" expand="block" [disabled]="form.invalid">Login</ion-button>
  </form>
</ion-content>

在“ login.page.ts”的逻辑中 

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AlertController, LoadingController, ToastController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';

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

  constructor(
    private authService: AuthService,
    private alertCtrl: AlertController,
    private toastCtrl: ToastController,
    private loadingCtrl: LoadingController,
    private router: Router,
  ) { }

  form = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.minLength(6)]),
    password: new FormControl('', [Validators.required, Validators.minLength(3)]),
  });

  // odosle logovaci formular s udajmi (pre prihlasenie existujuceho pouzivatela):
  async onSubmit() {
    console.log(this.form.value);
    const loading = await this.loadingCtrl.create({
      message: 'Logging ...'
    });
    await loading.present();
    this.authService.login(this.form.value).subscribe(
      // ak je uspesny login:
      async access_token => {
        localStorage.setItem('token', access_token);
        console.log('token: '+access_token);
        loading.dismiss();
        this.router.navigateByUrl('/home');
      },
      // ak sa vyskytla nejaka chyba:
      async () => {
        const alert = await this.alertCtrl.create({
          message: 'Login failed',
          buttons: ['OK']
        });
        await alert.present();
        loading.dismiss();
        this.form.reset();
      }
    );
  }

}

和Esight应在“ login.module.ts”：
中调整 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    LoginPageRoutingModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

我添加了“ ReactiveForsModule”。
在圣的“ app.module.ts”中，事物是补充的（vii druhá časť）。
如果您现在看到“登录”，即：

http://localhost:8100/login

Zobrazãsaprihlasovin.

Image description

测试“功能”的功能

正如druhej časti中提到的那样，必须拥有数据库数据库服务器，以及由API接口的其余部分压碎的应用程序的后排。 > 如果是这样，我可以等待客户的休息（例如“失眠”或“ Postman”

Image description

Image description
哦，REST API接口“为”并且可以正常工作。

现在，我将跳出离子应用程序 - 启动（在离子项目中）开发服务器，使用：

ionic serve

在浏览中，我看到了离子应用程序，即。 

http://localhost:8100/home

äOzobrazã：

Image description
传输到“登录”，在其中填写有关现有用途现有使用的必要信息：

Image description
未能通过[登录] A：

Image description
由于“令牌”拥挤，这意味着它有点一点，并且从这个离子应用程序中也有REST API请求。
一段时间后，重定向到“家庭”，就像“ login.page.ts”。

Esejum，“家”皮带的故乡，因此在看到它的情况下。有一对[寄存器]和[登录]。
在布局布局“ home”（在圣bor中”。 

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <div *ngIf="loggedUser; else noLoggedUser">
      <strong>Moja Ionic app</strong>
      <div class="button-container">
        <ion-button >Logout</ion-button>
      </div>
    </div>
    <ng-template #noLoggedUser>
      <strong>Moja Ionic app</strong>
      <div class="button-container">
        <ion-button (click)="goToRegisterPage()">Register</ion-button>
        <ion-button (click)="goToLoginPage()">Login</ion-button>
      </div>
    </ng-template>
  </div>

</ion-content>

和在圣bor中”。 

import { Component } from '@angular/core';
import {NavController} from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  loggedUser = localStorage.getItem('token');

  constructor(
    private navCtrl: NavController
  ) {}

  goToLoginPage() {
    this.navCtrl.navigateForward('login');
  }
  goToRegisterPage() {
    this.navCtrl.navigateForward('register');
  }
}

如果我现在进入应用程序，那么时间后，它会将我重定向到“家”房屋，那里将在那里打印[注销]：

Image description
...