Question

我现在正在通过注册和登录表单并连接到firebase来学习路线。

以下是指定每条路线的routes.ts文件：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './auth/signin/signin.component';
import { SignupComponent } from './auth/signup/signup.component';
const appRoutes: Routes = [
    {path: '', redirectTo:'/signup', pathMatch:'full'},
    {path: 'signin', component: SigninComponent},
    {path: 'signup', component: SignupComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports:[RouterModule]
})
export class AppRoutingModule { }

然后这是注册表单和它的打字稿文件：

<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form (ngSubmit)="onSignup(f)" #f="ngForm">
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" name="email" id="email" ngModel>
    </div>
    <div class="form-group">
        <label for="Password">Password</label>
        <input type="Password" class="form-control" name="Password" id="Password" ngModel>
    </div>
    <button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
    <a [routerLink]="['/signin']">You already have an account ? Sign In</a>

</div>

Signup.ts：

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import {AuthService} from '../auth.service';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit() {
  }

  onSignup(form: NgForm){
    const email = form.value.email;
    const password = form.value.password;

    this.authService.signupUser(email, password);
  }

}

如你所见，我有onSignup（）函数。

对于登录组件也一样：

<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form (ngSubmit)="onSignin(f)" #f="ngForm">
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" name="email" id="email" ngModel>
    </div>
    <div class="form-group">
        <label for="Password">Password</label>
        <input type="Password" class="form-control" name="Password" id="Password" ngModel>
    </div>
    <button type="submit" class="btn btn-primary">Sign In</button>
</form>
</div>
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
    <a [routerLink]="['/signup']">Click to register</a>
</div>

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AuthService } from '../auth.service'
@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit() {
  }

  onSignin(form: NgForm)
  {
    const email = form.value.email;
    const password = form.value.password;
    this.authService.signinUser(email, password);
  }
}

包含signinUser()和singupUser()方法的身份验证服务文件脚本：

import * as firebase from 'firebase';
export class AuthService {
    signupUser(email: string, password: string)
    {
        firebase.auth().createUserWithEmailAndPassword(email, password)
            .catch(
                error=>console.log(error)
            )
    }

    signinUser(email: string, password: string)
    {
        firebase.auth().signInWithEmailAndPassword(email, password)
            .then(
                response => console.log(response)
            )
            .catch(
                error => console.log(error)
            )
    }
}

这里的问题是，当我注册一个新用户时，将重新加载所有页面，并且没有任何内容添加到firebase数据库。

所以我在firebase上手动创建了一个用户，并尝试了登录表单，然后再次重新加载页面，控制台中没有任何内容（无输出，无错误）

Answer 1

我刚刚遇到这个问题，我的头发被撕了一个小时。正确配置的表单将在提交时重新加载页面的原因是ts文件中的onSubmit（）方法存在错误。这个很难追溯，因为问题实际上是在我的initializeApp方法中。确保使用apiKey和authDomain传递的对象是正确的。在我的情况下，我输入了

{api: "...mykey...", authDomain: "...myurl..."}

而不是api 键。另外请务必正确复制您的身份验证网址。不要把http：//放在前面。

因此，登录和注册方法不知道要使用哪个url和api密钥，因为初始化从未正确完成并存储在SDK中。我希望这有助于解决您的问题。

Angular 2页重新加载而不是安慰我们注册或登录

1 个答案: