Angular 2登录时导航到其他页面 [英] Angular 2 navigate to a different page on login

问题描述

我正在开发一个登录页面.成功登录后，用户将被重定向到其他页面.在表单中，我保留了表单属性method ="post"，因为我不希望用户名和密码出现在url上.但是，成功登录后，执行this.router.navigate(['post']);时，出现错误无法发布/post".

I am developing a login page. On successful login, the user will be redirected to a different page. In the form, I have kept form attribute method="post" because I do not want the username and password to appear on the url. However, on successful login, when this.router.navigate(['post']); is executed, I am getting the error "cannot POST /post".

如果我编写method ="get"，则说明一切正常，但是用户名和密码显示在url上.请让我知道解决该问题的正确方法是什么:

If I write method="get", things are working but the username and the password are appearing on the url. Please let me know what would be the correct approach to handle this:

login.component.ts

login.component.ts

import { Component, trigger, state, style, transition, animate } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthenticatorService } from './authenticator.service';
import { Router } from '@angular/router';

@Component({
    selector: 'login',
    templateUrl: 'template/login.html',
    animations: [
        trigger('heroState', [
            state('inactive', style({
                height: '0',
                paddingTop: '0',
                paddingBottom: '0',
                marginTop: '0',
                marginBottom: '0',
                visibility: 'hidden',
                overflowY: 'hidden'
            })),
            state('active', style({

            })),
            transition('inactive => active', animate('300ms ease-in')),
            transition('active => inactive', animate('300ms ease-out'))
        ])

    ]
})
export class LoginComponent {

    private formGroup: FormGroup;
    private authenticated = false;
    private loginErrorMessage = 'inactive';
    constructor(formBuilder: FormBuilder, private authenticator: AuthenticatorService, private router: Router) {
        this.formGroup = formBuilder.group({
            username: ['', [Validators.required, Validators.minLength(3)]],
            password: ['', Validators.required]
        });
    }

    onClick() {
        this.authenticated = this.authenticator.authenticate(this.formGroup.controls["username"].value, this.formGroup.controls["password"].value);
        this.loginErrorMessage = this.authenticated?'inactive':'active';
        setTimeout(()=>{
            if(this.loginErrorMessage === 'active') {
                this.loginErrorMessage='inactive';
            }
        },3000);
        if(this.authenticated) {
            this.router.navigate(['post']);
        }
    }

    getLoginStatus() {
        return this.loginErrorMessage;
    }
}

是login.html的一部分

form part of login.html

    <form [formGroup]="formGroup" role="form" action="" method="post" class="login-form">
        <div *ngIf="formGroup.controls.username.touched && formGroup.controls.username.errors && formGroup.controls.username.errors.required" class="error-text">Username is required</div>
        <div *ngIf="formGroup.controls.username.touched && formGroup.controls.username.errors && formGroup.controls.username.errors.minlength" class="error-text">Username must be atlease three characters long</div>
        <div class="form-group">
            <label class="sr-only" for="form-username">Username</label>
            <input formControlName="username" type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username">
        </div>
        <div class="form-group">
            <label class="sr-only" for="form-password">Password</label>
            <input formControlName="password" type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
        </div>
        <button [disabled]="!formGroup.valid" (click)="onClick()" type="submit" class="btn">Sign in!</button>
    </form>

推荐答案

另一个有用的答案，可以帮助我解决问题.但是，我在这里发布解决该问题的实际修复程序.

The other answer in useful and helped me solve the problem. However, I am posting here the actual fix that solved the problem.

我必须删除提交"按钮上的(click)="onClick()"并将(ngSubmit)="onClick()"添加到表单元素.

I had to remove the (click)="onClick()" on the submit button and add the (ngSubmit)="onClick()" to the form element.

文档中的以下文本有助于理解:

The following text from the angular documentation helped in understanding:

用户应该在填写完该表单后就可以提交它.表单底部的Submit按钮不能单独执行任何操作，但是由于其类型(type ="submit")，它将触发表单提交.

The user should be able to submit this form after filling it in. The Submit button at the bottom of the form does nothing on its own but it will trigger a form submit because of its type (type="submit").

表单提交"目前无济于事.为了使它有用，我们将使用另一个Angular指令NgSubmit更新标签，并通过事件绑定将其绑定到HeroFormComponent.submit()方法

A "form submit" is useless at the moment. To make it useful, we'll update the tag with another Angular directive, NgSubmit, and bind it to the HeroFormComponent.submit() method with an event binding

这篇关于Angular 2登录时导航到其他页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！