Angulare Fire，扩展 AuthGuard 和重定向 url

Question

Anguar Fire 带有一套自己的守卫（AngularFireAuthGuard）：

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

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

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

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

Answer 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 },
  },
]

Auth组件页面

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

Answer 2

在重定向发生之前，

authGuardPipe

会传递

ActivatedRouteSnapshot

和

RouterStateSnapshot

的实例，因此您可以这样设置

路线

{
    path: 'foo',
    canActivate: [AuthGuard],
    data: {
        authGuardPipe: (
            _route: ActivatedRouteSnapshot,
            router: RouterStateSnapshot
        ) =>
            redirectUnauthorizedTo(
                `login?redirect=${encodeURIComponent(router.url)}`
            ),
    },
}