Angular 6 - Firebase - Маршрутизация не происходит должным образом после успешного входа - PullRequest
Новая
       15

Angular 6 - Firebase - Маршрутизация не происходит должным образом после успешного входа

0 голосов
/ 05 июня 2019

Потратил много часов, чтобы исправить мою проблему, но не смог ее решить. Кроме того, я сталкивался с похожими темами из SO, но все еще не нашел решения, чтобы решить эту проблему.

Выпуск

после успешной регистрации я получил флажок подтверждения электронной почты на true. но когда я пытаюсь войти обратно с теми же учетными данными, маршрутизация на «домашнюю» страницу не происходит. Я не знаю, как сделать этот метод сообщения.

пока что есть.!

firebase-service.ts 

export class FireBaseAuthenticationService {
  userData: any;
  constructor(
    public afs: AngularFirestore,
    public afAuth: AngularFireAuth,
    public router: Router,
    public ngZone: NgZone
  ) {
    this.afAuth.authState.subscribe(user => {
      if (user) {
        this.userData = user;
        localStorage.setItem('customerInfo', JSON.stringify(this.userData));
        JSON.parse(localStorage.getItem('customerInfo'));
      } else {
        localStorage.setItem('customerInfo', null);
        JSON.parse(localStorage.getItem('customerInfo'));
      }
    });
  }
  userLogin(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .then((result) => {
        this.ngZone.run(() => {
          this.router.navigate(['home']);
        });
        this.setCustomerInfo(result.user);
      }).catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log('err', errorMessage);
      })
  }
}

пользователь-login.html 

<fieldset class="clearfix">
            <p><span class="fa fa-user"></span><input type="text" Placeholder="Username" required #userName ></p>
            <p><span class="fa fa-lock"></span><input type="password" Placeholder="Password" required #userPassword></p>
            <div id="submit-btn">

              <span class="spn-submit"><input type="submit" value="Sign In"  (click)="authenticate.userLogin(userName.value, userPassword.value)"></span>
            </div>
          </fieldset>

Ожидаемый результат:

  1. После успешного входа я хочу перейти на «домашнюю» страницу.

но сейчас страница входа в систему загружается на секунды и остается той же страницей.

Пожалуйста, дайте мне знать, требуется больше информации.

Просьба не помечать его как дубликат, я уже выкопал SO, чтобы найти решение. но я провалился

спасибо всем

1 Ответ

1 голос
/ 07 июня 2019

вы перенаправляете через службу, поэтому используйте оператор do или верните наблюдаемое и перенаправьте в компонент.

, используя оператор do 

userLogin(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .do((result) => {
        this.ngZone.run(() => {
          this.router.navigate(['home']);
        });
        this.setCustomerInfo(result.user);
      }).catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log('err', errorMessage);
      })
  }

Iсделал навигацию внутри .do (), ПОТОМУ ЧТО успешный вход в систему ВСЕГДА будет переходить на текущий установленный URL перенаправления.

Если он не ВСЕГДА делал это, тогда router.navigate будет неправильным.Однако, учитывая, что он ВСЕГДА делает это, этот подход обеспечивает согласованность.

создает метод в компоненте и перенаправляет его из компонента. 

// service code
 userLogin(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password);
  }
}


// component code
userLogin(email, password) {
  this.authService.userLogin(email, password).then((result) => {
    this.ngZone.run(() => {
      this.router.navigate(['home']);
    });
    this.setCustomerInfo(result.user);
  }).catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    console.log('err', errorMessage);
  })
}
...