typescript - Angular 6 - Firebase - Chuyển hướng không diễn ra đúng sau khi đăng nhập thành công

Đã dành nhiều giờ để sửa vấn đề của mình, nhưng không thể làm được. Ngoài ra, tôi cũng đã gặp các chủ đề liên quan từ SO, nhưng vẫn không tìm thấy giải pháp để khắc phục điều này.

Vấn đề

sau khi đăng ký thành công, tôi nhận được cờ xác thực email là true. nhưng khi tôi cố gắng đăng nhập lại với cùng thông tin đăng nhập, việc điều hướng đến trang 'home' không xảy ra. Tôi không biết làm thế nào để thực hiện phương thức post đó.

cho đến nay những gì có là.!

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);
      })
  }
}

người-dùng-đăng-nhập.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>

mong đợi:

1. Khi đăng nhập thành công, tôi muốn đi đến trang 'trang chủ'.

nhưng ngay bây giờ, trang đăng nhập tải trong vài giây và vẫn giữ nguyên trang.

xin vui lòng cho tôi biết thêm thông tin cần thiết.

Xin đừng đánh dấu nó là trùng lặp, tôi đã tìm kiếm trên SO để tìm giải pháp. nhưng tôi đã thất bại.

cảm ơn tất cả

Câu trả lời #1

bạn đang chuyển hướng thông qua dịch vụ, vì vậy hãy sử dụng toán tử do hoặc trả về observable và chuyển hướng trong component.

sử dụng toán tử 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);
      })
  }

Tôi đã thực hiện điều hướng bên trong .do() BỞI VÌ một lần đăng nhập thành công sẽ LUÔN LUÔN điều hướng đến URL chuyển hướng hiện tại đã được thiết lập.

Nếu nó không LUÔN luôn làm điều này thì router.navigate sẽ sai. Tuy nhiên, vì nó LUÔN luôn làm điều này nên cách tiếp cận này đảm bảo tính nhất quán.

tạo một phương thức trong thành phần và chuyển hướng từ thành phần đó.

// 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);
  })
}