使用web api的Ionic登录系统(基于令牌)

Question

​

我正在制作照片分享应用程序，我想在其中登录系统。当登录时，它会给出错误，如值未找到.In服务我正在获取值.Please帮助我如何在离子login.page.ts中获取电子邮件和密码以下是我的代码，这是我的代码是编码.

login.page.ts

import { Component, OnInit } from '@angular/core';
import { NavController, MenuController, ToastController, AlertController, LoadingController } from '@ionic/angular';
import { Router, ActivatedRoute } from '@angular/router';
import { User } from '../user';
import { first } from 'rxjs/operators';
import { UserService } from '../user.service'
import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  public onLoginForm: FormGroup;
  submitted = false;
  constructor(public navCtrl: NavController,
    public menuCtrl: MenuController,
    public toastCtrl: ToastController,
    public alertCtrl: AlertController,
    public loadingCtrl: LoadingController,
    private formBuilder: FormBuilder,
    private userService: UserService,
    public router: Router) {

  }

  ionViewWillEnter() {
    this.menuCtrl.enable(false);
  }

  ngOnInit() {
    this.onLoginForm = this.formBuilder.group({
      'email': [null, Validators.compose([
        Validators.required,
        Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
      ])],
      'password': [null, Validators.compose([
        Validators.required,
        Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$')
      ])]
    });
  }
  onSubmit() {
    this.submitted = true;
    console.log(this.onLoginForm.value);
    this.userService.login(this.onLoginForm.email.value,
      this.onLoginForm.password.value)
      .pipe(first())
      .subscribe(
        data => {
          if (data.status === false) {
            alert("Please enter valid Email Or Password");
            this.router.navigate(['login']);

          }
          else {


            this.router.navigate(['blog-list']);

          }
        }
      );
  }


}

下面是我的用户服务，我在其中调用了laravel-passport api。

user.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  token: any;
  constructor(private http: HttpClient) { }

  register(user: User) {

    return this.http.post(`http://localhost:8000/api/register`, user);
  }

  login(email: string, password: string) {

    return this.http.post<any>(`http://localhost:8000/api/login`, { email, password })
      .pipe(map(user => {
        return user;
      }));
  }
}

Answer 1

正如您所建立的，您的值是以onLoginForm.value表示的。因此，如果您想访问email和password值，则需要使用...

this.onLoginForm.value.email;
this.onLoginForm.value.password;

另一种选择是使用：

this.onLoginForm.get('email').value
this.onLoginForm.get('password').value