Я пытаюсь создать страницу входа с Angular. У меня есть компонент Angular (html, css и файлы ts), который обрабатывает эту функцию. Начиная с HTML, есть два поля и две кнопки. Имя пользователя, пароль, логин и регистрация. Если вы введете незнакомые имя пользователя и пароль и нажмете «Зарегистрироваться», я хочу, чтобы компонент TS добавил этого пользователя (с паролем) в список допустимых комбинаций.
Если я войду под своим жестко заданным пользователем (michael), работает нормально. Если я зарегистрирую пользователя и сразу войду в систему, это тоже будет работать. Но когда я регистрирую пользователя и обновляю sh страницу, новый зарегистрированный пользователь исчезает из списка (пользователей).
HTML:
<div *ngIf="loggedin === false">
<label for="username">Name</label>
<input id=username [(ngModel)]="username" type="text">
<label for="password">Password</label>
<input id=password [(ngModel)]="password" type="password">
<button type="submit" (click)="login(username,password)">Login</button>
<div class="snackbar">
<button (click)="register(username,password)">Register</button>
</div>
</div>
TS:
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {MatSnackBar} from '@angular/material/snack-bar';
export class User {
username:string;
password:string;
constructor(username, password){
this.username = username;
this.password = password;
}
}
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
encapsulation: ViewEncapsulation.None
})
export class LoginComponent implements OnInit {
static users: Array<User> = [new User('Michael', 'admin')];
username:string;
password:string;
loggedin:boolean;
constructor(
private _snackBar: MatSnackBar
) {
}
ngOnInit(): void {
this.loggedin = false;
}
login(username, password){
let currentUser = new User(username, password);
LoginComponent.users.forEach((element) => {
if (element.username == currentUser.username){
if (element.password == currentUser.password){
this.loggedin = true;
}
else {
alert('Incorrect password');
}
}
else {
alert('Unknown user');
}
});
}
logout(){
this.loggedin = false;
window.location.reload();
}
register(username, password) {
LoginComponent.users.push(new User(username, password));
this._snackBar.open(username +" is added", 'close', {
duration :4000,
});
}
}
Главный вопрос: как сохранить массив пользователей в памяти, когда происходит refre sh? Учитывая, что я не хочу добавлять серверную часть (на данном этапе разработки)