java - 如何使用 Angular 4 登录？我们使用的主题是使用 fack-bakcend 提供者概念？

Question

我是 Angular 4 的新手。我对我们正在使用的主题的组件有基本的了解。但默认情况下，主题具有 fack 后端提供程序。

auth.component.ts

signin() {
    this.loading = true;
    this._authService.login(this.model.username, this.model.password)
        .subscribe(
        res => {
            console.log(res);
            localStorage.setItem('currentUser', JSON.stringify(this.model.username));
            // localStorage.setItem("username", "username");
            this._router.navigate(['http://localhost:9090/index']);
        },
        error => {
            this.showAlert('alertSignin');
            this._alertService.error(error);
            this.loading = false;
        });
}

authentication.service.ts

login(username: string, password: string) {
    let url = "/login";
    let body = new FormData();
    body.append('username', username);
    body.append('password', password);
    // let body = `username=${username}&password=${password}`;
    return this.http.post(url, body);

}

登录.component.html

<form (ngSubmit)="signin()" #f="ngForm" class="m-login__form m-form" action="">
                        <ng-template #alertSignin></ng-template>
                        <div class="form-group m-form__group">
                            <input class="form-control m-input" type="text" placeholder="Email" name="username" [(ngModel)]="model.username" #username="ngModel" autocomplete="off">
                        </div>
                        <div class="form-group m-form__group">
                            <input class="form-control m-input m-login__form-input--last" type="password" placeholder="Password" name="password" [(ngModel)]="model.password" #password="ngModel">
                        </div>
                        <div class="row m-login__form-sub">
                            <div class="col m--align-left">
                                <label class="m-checkbox m-checkbox--focus">
                                    <input type="checkbox" name="remember" [(ngModel)]="model.remember" #remember="ngModel">
                                    Remember me
                                    <span></span>
                                </label>
                            </div>
                            <div class="col m--align-right">
                                <a href="javascript:;" id="m_login_forget_password" class="m-link">
                                    Forget Password ?
                                </a>
                            </div>
                        </div>
                        <div class="m-login__form-action">
                            <button [disabled]="loading" [ngClass]="{'m-loader m-loader--right m-loader--light': loading}" class="btn btn-focus m-btn m-btn--pill m-btn--custom m-btn--air">
                                Sign In
                            </button>
                        </div>
                    </form>

我的代码正在登录但未重定向。我做错了什么？

我搜索了很多链接，但没有任何帮助。提前致谢。

Answer 1

首先，如果你想在你的登录函数中实际实现真正的支持身份验证，你必须使用/login 调用 API 调用，你必须在其中放置你的真实 API URL，你可以在其中使用你的数据库和 API 调用检查用户名和密码生成响应并发送回组件文件。

然后在你的组件文件中，你已经在你的路由器导航中给出了完整路径，如果你在你的模块文件中创建了路由器常量，你必须只给出/index。