Блог

Главная - Вопросы по программированию - Ионная/угловая навигация после аутентификации firebase

Ионная/угловая навигация после аутентификации firebase

# #angular #firebase #ionic-framework #navigation #router

Вопрос:

После входа в систему с помощью метода входа в Google firebase я хочу перейти на домашнюю страницу. Я не могу понять, почему навигация не работает. Вот мой код:

 async signInWithGoogle() {

 // authentication works:
 await this.afAuth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());

 // but the following code doesn't get executed:
 this.ngZone.run(() => {
  this.router.navigate(['tabs/home']);
 });
}

Ответ №1:

Для навигации вам следует использовать один из этих методов:

 this.router.navigate(['tabs', 'home']);

или

 this.router.navigateByUrl('/tabs/home');

Комментарии:

1. Спасибо за ваш ответ. Я перепробовал все разные способы навигации. Но я обнаружил, что любой код ниже этой строки не будет выполняться. проблема, похоже, в чем-то другом. С помощью этого кода я ожидаю, что все следующие строки будут выполнены после завершения асинхронной операции. Но, похоже, это не так. Есть ли этому объяснение?

2. @Milchgraf, вероятно this.afAuth.signInWithRedirect , потерпит неудачу. Попробуй завернуть его в try/catch это .

3. Я уже пробовал это. this.afAuth.signInWithRedirect или this.afAuth.signInWithPopup работает совершенно нормально. Я также попытался привязать «.затем» к этому методу this.afAuth.signInWithRedirect(new firebase.auth.GoogleAuthProvider()).then()

4. @Milchgraf Работает ли навигация, если вы удалите/прокомментируете this.afAuth.signInWithRedirect строку? Вы проверили внутренний звонок run() ? Это звонки? У вас есть какие-нибудь охранники для навигации? И попытайтесь ориентироваться без ngZone.run()

5. Да, у меня есть охранник на /вкладках/дома. Когда я использую this.afAuth.signInWithPopup код внутри run (), он отключается, но навигация не работает. Я думаю, это из-за охраны на /вкладках/дома. Когда я использую this.afAuth.signInWithRedirect , я должен проверить результат перенаправления через this.afAuth.getRedirectResult() . Этот метод должен быть запущен ngOnInit() на странице входа в систему. Но навигация работает только в том случае, если я отключу охрану на /вкладках/дома.

Ответ №2:

Мой охранник выглядит так:

 canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    if (!this.authService.isLoggedIn) {
      this.router.navigateByUrl('welcome');
    }

    return this.authService.isLoggedIn;
}

и isLoggedIn добытчик выглядит так:

 get isLoggedIn() {
    const user = JSON.parse(localStorage.getItem('user'));
    return (user !== null amp;amp; user.emailVerified !== false) ? true : false;
}

я предполагаю, что возвращаемое значение является ложным, потому что все остальное работает синхронно

Я добавил метод getAuthState в AuthService, который возвращает логическое значение, но asynchron:

 async getAuthState() {
    const result = await this.afAuth.getRedirectResult();
    if (result.user) {
      return true;
    } else {
      return false;
    }
}

И обновил охрану, чтобы она выглядела так:

 canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (!this.authService.isLoggedIn) {
      this.router.navigateByUrl('welcome');
    } else {
      return this.authService.isLoggedIn;
    }

    if (!this.authService.getAuthState()) {
      this.router.navigateByUrl('welcome');
    }
    return this.authService.getAuthState();
}

и на странице входа в систему я добавил:

 this.authService.getAuthState().then(result => {
    console.log(result);
    if (result) {
      console.log('should redirect');
      this.router.navigateByUrl('/tabs/home');
    }
});

ведение журнала консоли выполняется true и should redirect , но не перенаправляется на /вкладки/главная страница.

Может быть, мне нужно провести небольшое исследование.. Здесь я обнаружил аналогичную проблему

Ответ №3:

Я нашел решение для защиты от аутентификации здесь

Вход в систему-Компонент:

 ngOnInit() {
  this.authService.getAuthState().then(result => {
    if (result) {
      this.router.navigateByUrl('/tabs/home');
    }
  });

  if (this.authService.isLoggedIn) {
    this.router.navigateByUrl('tabs/home');
  }
}

Авто-Охранник:

 return new Promise((resolve, reject) => {
  firebase.auth().onAuthStateChanged((user: firebase.User) => {
    if (user) {
      resolve(true);
    } else {
      this.router.navigate(['/welcome']);
      resolve(false);
    }
  });
});

И в службе аутентификации я только выполняю вход в систему и выполняю проверку подлинности для результата перенаправления:

 async signInWithGoogle() {
  await this.afAuth
 .signInWithRedirect(new firebase.auth.GoogleAuthProvider());
}

async getAuthState() {
  const result = await this.afAuth.getRedirectResult();
  if (result.user) {
    return true;
  } else {
    return false;
  }
}
Метки: