如何制作一个AngularFire路由保护，将未经授权的用户重定向回着陆页面?

Question

此路由保护阻止未经授权访问my-project.com/home，但它将用户重定向到空白页面，而不是我的着陆页面。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthPipe, AuthGuard, AuthGuardModule, AuthPipeGenerator, canActivate, hasCustomClaim, idTokenResult, isNotAnonymous, loggedIn, redirectLoggedInTo, redirectUnauthorizedTo, customClaims, emailVerified, } from '@angular/fire/auth-guard';
// components
import { LandingComponent } from './landing/landing.component';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const routes: Routes = [
{ path: 'landing', component: LandingComponent },
{ path: 'default', component: LandingComponent },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard], data: { authGuardPipe: redirectUnauthorizedTo(['landing']) }}, // route guard is here
{ path: '', component: LandingComponent },
{ path: '**', component: PageNotFoundComponent },
];
@NgModule({
imports: [
RouterModule.forRoot(routes),
provideAuth(() => getAuth()),
AuthGuardModule,
],
exports: [RouterModule]
})
export class AppRoutingModule { }

这个路由没有编译:

{ path: 'home', component: HomeComponent, canActivate(() => redirectUnauthorizedTo(['/landing'])) },

抛出这个错误信息:

TS2349: This expression is not callable.
Type '{ path: string; component: typeof HomeComponent; canActivate(): any; }' has no call signatures.

我尝试了AuthPipe和AuthPipeGenerator而不是authGuardPipe(这不是'@angular/fire/auth-guard'的方法)。

我导入了Auth和Auth- guard到app.module.ts，但没有帮助。

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { provideAuth, getAuth, } from '@angular/fire/auth';
import { AuthGuardModule } from '@angular/fire/auth-guard';
@NgModule({
imports: [
AppRoutingModule,
provideAuth(() => getAuth()),
AuthGuardModule, 

Answer 1

我明白了。I was missing

const redirectUnauthorizedToLanding = () => redirectUnauthorizedTo(['landing']);

现在我的代码工作了。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard, redirectUnauthorizedTo } from '@angular/fire/auth-guard';
// components
import { LandingComponent } from './landing/landing.component';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const redirectUnauthorizedToLanding = () => redirectUnauthorizedTo(['landing']); // this was missing
const routes: Routes = [
{ path: 'landing', component: LandingComponent },
{ path: 'default', component: LandingComponent },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard], data: { authGuardPipe: redirectUnauthorizedToLanding }},
{ path: '', component: LandingComponent },
{ path: '**', component: PageNotFoundComponent },
];
@NgModule({
imports: [
RouterModule.forRoot(routes),
],
exports: [RouterModule]
})
export class AppRoutingModule { }

不需要将'@angular/fire/auth'导入app-routing.module.ts。

不需要将'@angular/fire/auth-guard'导入app.module.ts。