Блог

Это угловой код для проверки входа в систему. В весенней обуви все идеально. Но в форме входа в систему, если я дам идентификатор и пароль из базы данных. Там написано, что вход в систему прошел успешно. Даже если я дам неправильный идентификатор и пароль, это говорит об успешном входе в систему. Это не соответствует действительности. Пожалуйста, дайте мне знать, что здесь не так?!

1) auth.service.ts

   import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { map } from 'rxjs/operators';  @Injectable({  providedIn: 'root' }) export class AuthenticationService {     USER_NAME_SESSION_ATTRIBUTE_NAME = 'authenticatedUser'   public patId!: number;  public password!: String;   constructor(private http: HttpClient) {   }   authenticationService(patId :number, password: String) {  return this.http.get(`http://localhost:8080/patientlogins`,  { headers: { authorization: this.createBasicAuthToken(patId, password) } }).pipe(map((res) =gt; {  this.patId = patId;  this.password = password;    }));  }   createBasicAuthToken(patId: number, password: String) {  return 'Basic '   window.btoa(patId   ":"   password)  }     isUserLoggedIn() {  let user = sessionStorage.getItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME)  if (user === null) return false  return true  }   getLoggedInpatId() {  let user = sessionStorage.getItem(this.USER_NAME_SESSION_ATTRIBUTE_NAME)  if (user === null) return ''  return user  } }  

2)login.component.html

 lt;div class="container col-lg-6"gt;  lt;h1 class="text-center"gt;Loginlt;/h1gt;  lt;div class="card"gt;  lt;div class="card-body"gt;  lt;form class="form-group"gt;  lt;div class="alert alert-warning" *ngIf='invalidLogin'gt;{{errorMessage}}lt;/divgt;  lt;div class="alert alert-success" *ngIf='loginSuccess'gt;{{successMessage}}lt;/divgt;  lt;div class="form-group"gt;  lt;label for="number"gt;PatientId:lt;/labelgt;  lt;input type="text" class="form-control" id="patId" [(ngModel)]="patId" placeholder="Enter patId"  name="patId"gt;  lt;/divgt;  lt;div class="form-group"gt;  lt;label for="pwd"gt;Password:lt;/labelgt;  lt;input type="password" class="form-control" [(ngModel)]="password" id="password" placeholder="Enter password"  name="password"gt;  lt;/divgt;  lt;button (click)=handleLogin() class="btn btn-success"gt;Loginlt;/buttongt;  lt;p class="message"gt;Not registered? lt;a href="#"gt;Create an accountlt;/agt;lt;/pgt;  lt;/formgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  

3)login.component.ts

 import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { Observable } from 'rxjs';  import { AuthenticationService } from './auth.service';  @Component({  selector: 'app-login',  templateUrl: './login.component.html',  styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit {   patId!: number;  password!: string;  errorMessage = 'Invalid Credentials';  successMessage!: string;  invalidLogin = false;  loginSuccess = false;   constructor(  private route: ActivatedRoute,  private router: Router,  private authenticationService: AuthenticationService) { }   ngOnInit() {  }   handleLogin() {  this.authenticationService.authenticationService(this.patId, this.password).subscribe((result)=gt; {  this.invalidLogin = false;  this.loginSuccess = true;  this.successMessage = 'Login Successful.';  this.errorMessage='Invalid Login';    }, () =gt; {  this.invalidLogin = true;  this.loginSuccess = false;  });   } }  

4)app-routing.module.ts

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router';  import { LoginComponent } from './login/login.component';  const routes: Routes = [  {path: 'login', component: LoginComponent},  ];  @NgModule({  imports: [RouterModule.forRoot(routes)],  exports: [RouterModule] })  export class AppRoutingModule { }  

5)app.module.ts

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';  import { LoginComponent } from './login/login.component'; import { FormsModule } from '@angular/forms'; import { HomeComponent } from './home/home.component';  @NgModule({  declarations: [  AppComponent,    LoginComponent,  HomeComponent    ],  imports: [  BrowserModule,  AppRoutingModule,  HttpClientModule,  FormsModule  ],  providers: [],  bootstrap: [AppComponent] }) export class AppModule { }  

 () =gt; {  this.invalidLogin = true;  this.loginSuccess = false;  }  

Эта часть handleLogin выполняется только в том случае, если http-сервер возвращает ошибку (500 или 503 или так далее).

В вашем случае это решит вашу проблему.

 handleLogin() {  this.authenticationService.authenticationService(this.patId, this.password).subscribe((result)=gt; {    for (const obj of result) {  if (obj.patId === this.patId amp;amp; obj.password === this.password) {  this.invalidLogin = false;  this.loginSuccess = true;  this.successMessage = 'Login Successful.';  return;  }  }  this.invalidLogin = true;  this.loginSuccess = false;  this.errorMessage='Invalid Login';    }, () =gt; {  this.invalidLogin = true;  this.loginSuccess = false;  });   }  

Но я настоятельно рекомендую вам не возвращать пароль пользователя в http-ответе. Это позволит раскрыть пароли пользователей другим пользователям. Вы должны проверить, совпадают ли идентификатор и пароль на стороне сервера, и просто ответить на результат.