Angulare Fire，扩展 AuthGuard 和重定向 url答案

【问题标题】：Angulare Fire, extending AuthGuard and redirect urlAngulare Fire，扩展 AuthGuard 和重定向 url
【发布时间】：2021-03-09 09:01:35
【问题描述】：

Aguar 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 进行身份验证”。

那么我如何自定义/丰富 Fire Auth 防护的逻辑以简单地存储重定向 url？

【问题讨论】：

标签： angular firebase-authentication angular11

【解决方案1】：

嗯，如果我们能看到一些尝试代码就好了。尤其是您想重定向的地方？如果有的话，需要什么条件？

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

*已编辑：如评论中所述。我使用 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]);
  }

【讨论】：

是的，这将始终将您的用户重定向到登录页面。但是一旦登录成功，您将如何将您的用户重定向到上一个页面？这是 Angular Routing 指南建议您将重定向 url 存储在 CanActivate 函数中的地方，因为它将在页面被激活之前被触发，因此它将始终保持上一页的值，从而允许您轻松存储您来自的页面。现在，您接下来需要的是一个身份验证状态的观察者，如果登录成功，则自动路由到重定向 url
啊，我明白了，因为我已经投资了 AngularFire。我使用 AngularAuthGuard 将未经授权的用户引导到身份验证页面，在身份验证组件中，我通过订阅路由器事件来获取先前的 URL，并使用 RXJS 过滤操作来获取先前的 URL。为了清楚起见，我将编辑我的答案。
谢谢，我现在也这样做并订阅路由更改以确定以前的网址