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

尝试实现 AuthGuard

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

Answer 2

多件事 1(身份验证方法没有检查它是否为空或你真的有用户。因此，例如，如果您的后端服务在用户未进行身份验证时返回空字符串，则基本上在本地设置该字符串，然后将其作为 checkLogin 的值返回。

2(检查登录甚至不检查它是否成功，您正在将其重定向到页面。所以你需要的是检查它是否成功 在重定向之前 checkLogin