[英]Angular - Redirect to Login after register and show a message
我正在开发一个 Angular 和 Spring Boot 应用程序,我对 Angular 很陌生。 我做了一些组件,一个用于登录的组件和一个用于注册的组件,我还做了一些验证等。现在,我想做的是当用户注册成功时,用户被重定向到登录页面,我想显示这样的信息:“注册成功!请登录!” 我知道如何将用户重定向到登录页面,但我不知道如何为用户显示此消息。
注册 ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { User } from '../model/user.model';
import { UserDataService } from '../service/data/user-data.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
invalidRegister = false;
errorMessage = '';
pass1 = '';
pass2 = '';
userName: string;
emailAddress: string;
user: User;
@ViewChild('f') signupForm: NgForm;
constructor(
private userDataService: UserDataService,
private router: Router) { }
ngOnInit() {
}
onSignup(form: NgForm) {
if (this.signupForm.valid === false) {
this.invalidRegister = true;
this.errorMessage = 'You must fill in all the fields!';
} else if (this.pass1 !== this.pass2) {
this.invalidRegister = true;
this.errorMessage = 'The passwords do not match!';
} else {
this.user = new User(this.userName, this.emailAddress, this.pass1);
console.log(this.user);
this.userDataService.addUser(this.user).subscribe(
data => {
console.log(data);
},
error => {
if (error.error.email === "duplicated") {
this.invalidRegister = true;
this.errorMessage = 'The email address you have used is already registered!';
} else if (error.error.username === "duplicated") {
this.invalidRegister = true;
this.errorMessage = 'The username is not available!';
}
},
() => {
this.invalidRegister = false;
this.router.navigate(['login']);
})
}
}
}
注册html
<h1>Register</h1>
<div class="alert alert-warning" *ngIf="invalidRegister">{{ errorMessage }}</div>
<form (ngSubmit)="onSignup()" #f="ngForm">
<div class="form-group row">
<label for="username" class="col-2 col-form-label">Username</label>
<div class="col-6">
<input
type="text"
id="username"
name="username"
ngModel
class="form-control"
required
#username="ngModel"
[(ngModel)]="userName">
<span
class="help-block text-danger"
*ngIf="!username.valid && username.touched">The username field is required!</span>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-2 col-form-label">Email</label>
<div class="col-6">
<input
type="email"
id="email"
name="email"
ngModel
class="form-control"
required
email
#email="ngModel"
[(ngModel)]="emailAddress">
<span
class="help-block text-danger"
*ngIf="!email.valid && email.touched">Please enter a valid email!</span>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-2 col-form-label">Password</label>
<div class="col-6">
<input
type="password"
id="password"
name="password"
ngModel
class="form-control"
required
#password="ngModel"
[(ngModel)]="pass1">
<span
class="help-block text-danger"
*ngIf="!password.valid && password.touched">The password field is required!</span>
</div>
</div>
<div class="form-group row">
<label for="pass" class="col-2 col-form-label">Confirm Password</label>
<div class="col-6">
<input
type="password"
id="pass"
name="pass"
ngModel
class="form-control"
required
#pass="ngModel"
[(ngModel)]="pass2">
<span
class="help-block text-danger"
*ngIf="!pass.valid && pass.touched">Please confirm your password!</span>
</div>
</div>
<button class="btn btn-primary" type="submit">Sign Up</button>
</form>
登录
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { BasicAuthenticationService } from '../service/basic-authentication.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
username = '';
password = '';
errorMessage = 'Invalid Credentials';
invalidLogin = false;
constructor(
private router: Router,
private basicAuthenticationService: BasicAuthenticationService) { }
ngOnInit() {
}
handleBasicAuthLogin() {
this.basicAuthenticationService.executeAuthenticationService(this.username, this.password)
.subscribe(
data => {
console.log(data);
this.router.navigate(['welcome', this.username]);
this.invalidLogin = false;
},
error => {
console.log(error);
this.invalidLogin = true;
}
);
}
登录 html
<h1>Login</h1>
<div class="container">
<div class="alert alert-warning" *ngIf='invalidLogin'>{{ errorMessage }}</div>
<div>
User Name: <input type="text" name="username" [(ngModel)]="username" >
Password: <input type="password" name="password" [(ngModel)]="password">
<button (click)="handleBasicAuthLogin()" class="btn btn-success">Login</button>
</div>
</div>
注册成功后,可以在路由中添加查询参数,导航到登录
this.router.navigate(['login'], {queryParams: { registered: 'true' } });
网址将如下所示: https://foobar.com/login?registered=true
: https://foobar.com/login?registered=true
在login.ts
infoMessage = '';
ngOnInit() {
this.route.queryParams
.subscribe(params => {
if(params.registered !== undefined && params.registered === 'true') {
infoMessage = 'Registration Successful! Please Login!';
}
});
}
并在login.html
添加这种行
<span *ngIf="infoMessage.length > 0">{{ infoMessage }}</span>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.