如何使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引入了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

我想通了。我失踪了

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。