Я пытаюсь добавить защиту canActivate()
для компонента Dashboard в моем приложении Angular.
В настоящее время сторож возвращает true, если пользователь вводит любой имя пользователя и пароль в форме входа.
Вот это canActivate() Guard
:
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.checkLoggedIn();
}
checkLoggedIn(): boolean {
if (this.authService.isLoggedIn) {
return true;
}
this.router.navigate(['/login']);
return false;
}
Вот метод login()
в моем файле Typescript:
login(loginForm: NgForm) {
if (loginForm && loginForm.valid) {
const userName = loginForm.form.value.userName;
const password = loginForm.form.value.password;
this.authService.login(userName, password);
// Navigate to the Dashboard after log in.
this.router.navigate(['/dashboard']);
} else {
this.errorMessage = 'Please enter a user name and password.';
}
}
А вот и мой authService
:
get isLoggedIn(): boolean {
return !!this.currentUser;
}
login(userName: string, password: string): void {
if (!userName || !password) {
return;
}
if (userName === 'admin') {
this.currentUser = {
id: 1,
userName: userName,
isAdmin: true
};
return;
}
this.currentUser = {
id: 2,
userName: userName,
isAdmin: false
};
}
Вместо этой функции я хочу найти Employees.json
, файл, который я размещаю на сервере.
Ниже приведен код моего Employee Service
:
baseUrl = 'http://localhost:3000/employees';
getEmployee(id: number): Observable<IEmployee> {
return this.httpClient.get<IEmployee>(`${this.baseUrl}/${id}`)
.pipe(catchError(this.handleError));
}
getEmployees(): Observable<IEmployee[]> {
return this.httpClient.get<IEmployee[]>(this.baseUrl)
.pipe(catchError(this.handleError));
}
Может кто-нибудь сказать, как я могу использовать введенные пользователем имя пользователя и пароль, чтобы проверить, существуют ли имя пользователя и пароль в employees.json
?
Также, вот структура Employee
объектов:
export interface IEmployee {
id: number;
username: string;
password: string;
}