Angulare Fire, расширение AuthGuard и URL-адрес перенаправления

Anguar Fire поставляется с собственным набором охранников (AngularFireAuthGuard):

https://github.com/angular/angularfire/blob/master/docs/auth/router-guards.md

Однако при их использовании я больше не могу хранить URL-адрес перенаправления. Сохранение URL-адреса перенаправления в Auth Guard невероятно удобно, так как вы можете просто использовать это значение для любого наблюдателя состояния аутентификации, автоматически перенаправляя вас на предыдущую страницу.

Сохранение URL-адреса перенаправления с помощью охранника также является предполагаемым способом Angular, см. https://angular.io/guide/router-tutorial-toh#milestone-5-route-guards глава Аутентификация с помощью AuthGuard.

Итак, как я могу настроить / обогатить логику защиты Fire Auth, чтобы также просто сохранить URL-адрес перенаправления?


person TeaCups20    schedule 09.03.2021    source источник


Ответы (1)


Хм, будет хорошо, если мы увидим какие-нибудь коды попыток. Особенно туда, куда вы хотите перенаправить? и после каких условий, если они есть?

В любом случае именно так перенаправляю неавторизованных пользователей.

* EDITED: как указано в комментарии. Я использую AngularAuthGuard, чтобы направить неавторизованного пользователя на страницу аутентификации, в компоненте аутентификации я беру предыдущий URL-адрес, подписываясь на события маршрутизатора, и использую операцию фильтра RXJS, чтобы просто перейти к предыдущему.

Ну смотря как у вас логика. У меня это отлично работает. Бьюсь об заклад, есть что-то получше. Может быть, скорее, обходной путь. Приветствую ~

Перенаправить неавторизованных пользователей

import {
  AngularFireAuthGuard,
  redirectUnauthorizedTo,
} from '@angular/fire/auth-guard';

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['loginPage']);

const routes: Routes = [
  {
    path: 'members',
    component: InstructorComponent,
    canActivate: [AngularFireAuthGuard],
    data: { authGuardPipe: redirectUnauthorizedToLogin },
  },
]

Страница компонента аутентификации

import { NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs/operators';

previousUrl: string;
currentUrl: string;

constructor(private router: Router) {}

ngOnInit(): void {
    this.router.events
      .pipe(filter((event) => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        this.previousUrl = this.currentUrl;
        this.currentUrl = event.url;
        console.log(this.previousUrl);
      });
  }

reDirectToPreviousURL() {
    this.router.navigate([this.previousUrl]);
  }
person imcodean    schedule 09.03.2021
comment
Да, это всегда будет перенаправлять вашего пользователя на страницу входа. Но после успешного входа в систему как вы перенаправите своего пользователя на предыдущую страницу? Здесь руководство по Angular Routing предлагает вам сохранить URL-адрес перенаправления в функции CanActivate, так как он будет запущен до активации страницы, поэтому он всегда будет содержать значение предыдущей страницы, что позволяет легко сохранить URL-адрес страница, откуда вы пришли. Теперь все, что вам нужно, это наблюдатель в состоянии аутентификации, чтобы автоматически перенаправить на URL-адрес перенаправления, если вход в систему был успешным. - person TeaCups20; 09.03.2021
comment
Ах, понятно, в моем случае, поскольку я уже вложил средства в AngularFire. Я использую AngularAuthGuard, чтобы направить неавторизованного пользователя на страницу аутентификации, в компоненте аутентификации я беру предыдущий URL-адрес, подписываясь на события маршрутизатора, и использую операцию фильтра RXJS, чтобы просто перейти к предыдущему. Отредактирую свой ответ для ясности. - person imcodean; 09.03.2021
comment
Спасибо, я сейчас тоже пойду по этому пути и подпишусь на изменения маршрута, чтобы определить предыдущий URL - person TeaCups20; 09.03.2021