我正在尝试使用 Angular 制作一个登录页面。我有一个处理此功能的 Angular 组件（html、css 和 ts 文件）。在 HTML 中，有两个字段和两个按钮。用户名、密码、登录和注册。如果您输入不熟悉的用户名和密码并单击注册，我希望 TS 组件将此用户（带密码）添加到有效组合列表中。
如果我用我的硬编码用户（迈克尔）登录，它工作正常。如果我注册一个用户并立即登录，它也可以。但是当我注册一个用户并刷新页面时，新注册的用户从列表（用户）中消失了。
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();
}
主要问题：刷新时如何将用户数组保存在内存中？鉴于我不想添加后端（此时正在开发）
凤凰求蛊
相关分类