Angular6后端連接

Question

我建立了一個登錄連接，該連接可以正常工作。

但是，此連接是通過本地連接在我的組件中建立的。

當我已經在服務中連接了后端時，如何檢查數據庫中的電子郵件和密碼？

抱歉，我是Angular的新手，而開發人員一般...

在此先感謝您的幫助！

零件：

import { Component, NgModule, OnInit } from '@angular/core';
import { ReactiveFormsModule, FormControl, FormGroup, NgForm, FormBuilder, Validators } from '@angular/forms';
import { userService } from '../services/user.service';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { UserModel } from '../models/user.model';
import { Router } from '@angular/router';

@NgModule({
  imports: [
    ReactiveFormsModule,
    FormControl,
    FormGroup,
    HttpClientModule,
    HttpModule
  ],
})

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit{
  model: UserModel = {username: "ambre.naude@infogene.fr", password: "test1234"};
  loginForm: FormGroup;
  message: string;

  loginUserData = {}

  constructor(private _userService: userService,
              private _userModel: UserModel,
              private router: Router, 
              private formBuilder: FormBuilder) {}  

  ngOnInit(){
    //connexion au backend
    this._userService.setUrl();
    this._userService

    //connexion à l'url du site
    /*this._userService.getConfiguration();*/

    //pour la fonction de login
    this.loginForm = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required]    });
      this._userService.logout();

  }
  get f() { return this.loginForm.controls; }

  login(){
    if (this.loginForm.invalid) {
      return;
    }
    else{
      if(this.f.username.value == this.model.username && this.f.password.value == this.model.password){
        console.log("Login successful");
        localStorage.setItem('isLoggedIn', "true");
        localStorage.setItem('token', this.f.username.value);
        this.router.navigate(['/home']);
      }
      else{
        this.message = "Veuillez vérifier vos identifiants";
      }
    }    
  }
}

服務：

import { Injectable, OnInit } from "@angular/core";
import { FormBuilder } from "@angular/forms";
import { HttpClient } from '@angular/common/http';

import { Router } from "@angular/router";
import { UserModel } from '../models/user.model';

export enum Endpoints {
    login = "/login",
    logout = "/LOGOUT",
    etc = "/ETC"
}

@Injectable()
export class userService implements OnInit{

    //pour connexion au backend
    private configJson: any;
    private configJsonLogin: any;
    private url: string;
    public href: string = "";


    constructor(private http: HttpClient,
                private router: Router,
                private _userModel: UserModel,
                private formBuilder: FormBuilder
                ){
    }

    ngOnInit(){}

   async setUrl(){
       //connexion au backend
        this.configJson = await this.http.get('../../assets/config.json').toPromise();
        this.url = this.configJson.url;
        console.log(this.url);
    }  

    logout(): void {
        localStorage.setItem('isLoggedIn', "false");
        localStorage.removeItem('token');
    } 
}

HTML：

<section class="background">

  <form class="connexion" [formGroup]="loginForm" (ngSubmit)="login()" name="form" #f="ngForm">

    <mat-form-field [ngClass]="{ 'has-error': submitted && f.userid.errors }">

      <label for="email">Email</label>
      <input matInput type="text" formControlName="username" name="email" required email />
      <div *ngIf="submitted && f.username.errors">
        <div *ngIf="f.username.errors.required">Vérifiez votre mail</div>
      </div>

    </mat-form-field>

    <mat-form-field [ngClass]="{ 'has-error': submitted && f.password.errors }">

      <label for="password">Password</label>
      <input matInput type="password" formControlName="password" name="password" required minlength="8" />
      <div *ngIf="submitted && f.password.errors">
        <div *ngIf="f.password.errors.required">Vérifiez votre mot de passe</div>
      </div>

    </mat-form-field>

    <div>
      <p *ngIf="message">{{message}}</p>
      <button mat-raised-button>Connexion</button><br/>
      <a routerLink='motdepasse' mat-button>Mot de passe oublié?</a>
    </div>

  </form>
</section>

Answer 1

為了使登錄能夠與后端一起使用，您當然需要一個正常工作的后端。 如果您沒有存儲/檢查這些用戶帳戶的位置，則僅創建登錄頁面無濟於事。
如果您不熟悉開發，建議您使用Firebase 。 它具有隨時可用的身份驗證服務以及存儲功能。

Answer 2

請按如下所示更改您的組件和服務，希望對您有意義。

步驟1：登錄提交事件，例如：

     onSubmit() {
        let reqData: any = {};
        reqData.Email = this.loginForm.value.UserName;
        reqData.Password = this.loginForm.value.Password;

         this._userService.post('/Login', reqData).subscribe(data => {
             console.log(data);
        }, err => {
             console.log('Error');        
          }, () => { });
      }

第2步：相應地更改服務

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw'; 

const httpHeader = {
    headers: new HttpHeaders({
        'Content-Type': 'application/json'        
    })
};



@Injectable()
export class userService {
    constructor(private http: HttpClient) { }

    //Your Service Login Method URL e.g. https://stackoverflow.com/api
    post(url: string, jsonBody: any): Observable<any> {
        let reqBody = JSON.stringify(jsonBody);       
        return this.http.post('[Your Service Login Method URL]'+url, reqBody, httpHeader).catch(this.handleError);
    }   
}


private handleError(httpErrorRes: HttpErrorResponse) {
        let errMsg = `${httpErrorRes.error.text}`;
        return Observable.throw(errMsg);
    }