javascript – Angular – 在注册后重定向到登录并显示消息

我正在开发一个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>

登录ts

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

在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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)