Angular Fire，扩展 AuthGuard 和重定向 url

Question

Anguar Fire 自带一套防护装置 (AngularFireAuthGuard)：

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

但是，在使用它们时我无法再存储重定向 url。在 Auth Guard 中存储重定向 url 非常方便，因为您可以简单地将此值用于任何身份验证状态观察器，自动将您路由到上一页。

使用守卫存储重定向 url 也是预期的 Angular 方式，请参阅 https://angular.io/guide/router-tutorial-toh#milestone-5-route-guards 章节“使用 AuthGuard 进行身份验证”。

那么我如何customize/enrich Fire Auth 守卫的逻辑也可以简单地存储重定向 url？

Answer 1

嗯，如果能看到一些尝试代码就好了。特别是您想重定向到哪里？如果有的话是在什么条件之后？

无论如何，这就是我重定向未授权用户的方式。

*编辑：如评论中所述。我使用 AngularAuthGuard 将未经授权的用户定向到 auth 页面，在 auth 组件中，我通过订阅路由器事件获取前一个 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]);
  }

Angular Fire，扩展 AuthGuard 和重定向 url

Angulare Fire, extending AuthGuard and redirect url

angular

firebase-authentication

angular11