Angular 登錄表單讓我通過任何用戶名和密碼對

Question

我的問題是我有一個用戶名和密碼對來登錄用戶，但我的登錄表單不應該只接受這個，而是接受任何類型的用戶名 - 密碼對，甚至是空字段，讓我進入受保護的頁面。 如果我用郵遞員發送我的憑據，它會按預期工作，所以問題應該出在前端。

這是我的登錄組件：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AuthenticationService } from '../service/AuthServices/authentication.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';

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

  username = '';
  password = '';
  invalidLogin = false;
  error = '';

  constructor(
    private router: Router,
    private formBuilder: FormBuilder,
    private loginservice: AuthenticationService,
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
  }

  checkLogin() {
    (this.loginservice.authenticate(this.username, this.password)
      .pipe(first())
      .subscribe(
        data => {
          // debugger;
          this.router.navigate(['employee'])

          this.invalidLogin = false
          console.log('User is logged in');
        },
        error => {
          this.error = error;
          console.log('error');
          this.invalidLogin = true
        }
      )
    );
  }
}

這是我的登錄服務：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {
  private currentUserSubject: BehaviorSubject<any>;
  public currentUser: Observable<any>;

  baseUrl = 'http://localhost:8080/test/rest/employees/' 

  constructor(
    private httpClient: HttpClient,
  ) {
    this.currentUserSubject = new BehaviorSubject<any>(JSON.parse(localStorage.getItem('currentUser')));
    this.currentUser = this.currentUserSubject.asObservable();
  }

  public get currentUserValue(): any {    //:User
    return this.currentUserSubject.value;
  }

  authenticate(username: string, password: string) {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    let url = this.baseUrl + 'login';
    const data = {
      username,
      password
    };

    return this.httpClient.post<any>(url, data, { headers }).pipe(
      map(user => {
        localStorage.setItem('currentUser', JSON.stringify(user));
        this.currentUserSubject.next(user);
        return user;
      })
    );
  }

  isUserLoggedIn() {
    let user = localStorage.getItem('currentUser');
    return !(user === null)
  }

  logOut() {
    localStorage.removeItem('currentUser');
    this.currentUserSubject.next(null);
  }
}

Answer 1

多件事 1) Authenticate 方法不檢查它是空的還是你真的有一個用戶。 因此，例如，如果您的后端服務在用戶未通過身份驗證時返回空字符串，則您基本上是在本地設置它，然后將其作為 checkLogin 的值返回。

2）checklogin 甚至不檢查它是否成功，而是將其重定向到頁面。 所以你需要的是在重定向之前檢查 checkLogin 是否成功

Answer 2

嘗試實施 AuthGuard

https://codeburst.io/using-angular-route-guard-for-securing-routes-eabf5b86b4d1