步骤
1、login-user.ts
运行如下命令
ng g class models\LoginUser
生成的login-user.ts更新后显示如下
export class LoginUser {
email: string | null = null;
password: string | null = null;
}
2、account.service.ts
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { LoginUser } from '../models/login-user';
import { RegisterUser } from '../models/register-user';
const API_BASE_URL: string = "https://localhost:7173/api/v1/account/";
@Injectable({
providedIn: 'root'
})
export class AccountService {
public currentUserName: string | null = null;
constructor(private httpClient: HttpClient) {
}
public postRegister(registerUser: RegisterUser): Observable<RegisterUser> {
return this.httpClient.post<RegisterUser>(`${API_BASE_URL}register`, registerUser);
}
public postLogin(loginUser: LoginUser): Observable<LoginUser> {
return this.httpClient.post<LoginUser>(`${API_BASE_URL}login`, loginUser);
}
public getLogout(): Observable<string> {
return this.httpClient.get<string>(`${API_BASE_URL}logout`);
}
}
3、login.component.ts
运行如下命令
ng g component Login
生成的login.component.ts更新后显示如下
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { LoginUser } from '../models/login-user';
import { AccountService } from '../services/account.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
loginForm: FormGroup;
isLoginFormSubmitted: boolean = false;
constructor(private accountService: AccountService, private router: Router) {
this.loginForm = new FormGroup({
email: new FormControl(null, [Validators.required, Validators.email]),
password: new FormControl(null, [Validators.required]),
});
}
get login_emailControl(): any {
return this.loginForm.controls["email"];
}
get login_passwordControl(): any {
return this.loginForm.controls["password"];
}
loginSubmitted() {
this.isLoginFormSubmitted = true;
if (this.loginForm.valid) {
this.accountService.postLogin(this.loginForm.value).subscribe({
next: (response: LoginUser) => {
console.log(response);
this.isLoginFormSubmitted = false;
this.accountService.currentUserName = response.email;
this.router.navigate(['/cities']);
this.loginForm.reset();
},
error: (error) => {
console.log(error);
},
complete: () => { },
});
}
}
}
4、login.component.html
<div class="w-75 margin-auto">
<div class="form-container">
<h2>Login</h2>
<form [formGroup]="loginForm" (ngSubmit)="loginSubmitted()">
<!-- email -->
<div class="form-field flex">
<div class="w-25">
<label for="email" class="form-label pt">Email</label>
</div>
<div class="flex-1">
<input type="text" id="email" class="form-input" formControlName="email" />
<span class="text-red" *ngIf="(login_emailControl.touched || isLoginFormSubmitted) && (login_emailControl.errors?.['required'])">Email can't be blank</span>
</div>
</div>
<!-- password -->
<div class="form-field flex">
<div class="w-25">
<label for="password" class="form-label pt">Password</label>
</div>
<div class="flex-1">
<input type="password" id="password" class="form-input" formControlName="password" />
<span class="text-red" *ngIf="(login_passwordControl.touched || isLoginFormSubmitted) && (login_passwordControl.errors?.['required'])">Password can't be blank</span>
</div>
</div>
<!-- submit -->
<div class="form-field flex">
<div class="w-25">
</div>
<div class="flex-1">
<button type="submit" class="button button-green-back">Login</button>
</div>
</div>
</form>
</div>
</div>
5、app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CitiesComponent } from './cities/cities.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
const routes: Routes = [
{ path: "cities", component: CitiesComponent },
{ path: "register", component: RegisterComponent },
{ path: "login", component: LoginComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
6、app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AccountService } from './services/account.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public accountService: AccountService, private router: Router) { }
onLogOutClicked() {
this.accountService.getLogout().subscribe({
next: (response: string) => {
this.accountService.currentUserName = null;
this.router.navigate([ '/login' ]);
},
error: (error) => {
console.log(error);
},
complete: () => { },
});
}
}
7、app.component.html
<div class="container">
<div class="page-content">
<div class="margin-bottom">
<div class="flex">
<div class="flex-1" id="top-bar-div">
<h2 class="app-title">
Cities Manager
</h2>
</div>
<div class="flex-1" id="search-box-div">
<div class="navbar account-links">
<ul *ngIf="accountService.currentUserName === '' || accountService.currentUserName === null || accountService.currentUserName === undefined">
<li>
<a [routerLink]="[ '/login' ]">Login</a>
</li>
<li>
<a [routerLink]="[ '/register' ]">Register</a>
</li>
</ul>
<ul *ngIf="accountService.currentUserName !== '' && accountService.currentUserName !== null && accountService.currentUserName !== undefined">
<li>
<a href="#" onclick="return false" (click)="onLogOutClicked()">Logout</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar mb">
<ul>
<li>
<a [routerLink]="[ '/cities']" [routerLinkActive]="[ 'nav-active']">Cities</a>
</li>
</ul>
</div>
<div class="body">
<router-outlet></router-outlet>
</div>
</div>
</div>
结果
程序运行后,可以Login/Logout。
Gitee获取源码: