angular - 仅在注销时尝试重定向到 Angular 中的登录页面
问题描述
我的 Angular 应用程序使用多个模块。我设法使路由工作,应用程序通常重定向到'keeper/caregivers',但我有一个问题:当我在根域名或 localhost:4200 中时,我已注销,它应该重定向我到登录页面。相反,它停留在 keeper/caregivers 页面中,并显示权限不足的错误(见下图)。我尝试在我的拦截功能中添加重定向,但它似乎永远不会触发。这是我的代码:app-routing-module
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {DefaultLayoutComponent} from './layout/default.layout.component';
import {AdminLayoutComponent} from './layout/admin.layout.component';
import {HhaLayoutComponent} from './layout/hha.layout.component';
const routes: Routes = [
{ path: '', redirectTo: 'keeper', pathMatch: 'full' },
{
path: 'keeper',
component: DefaultLayoutComponent,
children: [
{
path: '',
redirectTo: 'caregivers',
pathMatch: 'full'
},
{
path: '',
loadChildren: () =>
import('./caregivers/caregivers.module').then(
(m) => m.CaregiversModule,
),
},
// {
// path: 'caregivers',
// // redirectTo: 'caregivers',
// pathMatch: 'full'
// },
{
path: 'transactions',
loadChildren: () =>
import('./transactions/transactions.module').then(
(m) => m.TransactionsModule
),
},
{
path: 'dashboard',
loadChildren: () =>
import('./dashboard/dashboard.module').then(
(m) => m.DashboardModule
),
},
{
path: 'payback-schedule',
loadChildren: () =>
import('./payback-schedule/payback-schedule.module').then(
(m) => m.PaybackScheduleModule,
),
},
{
path: 'caregivers',
loadChildren: () =>
import('./caregivers/caregivers.module').then(
(m) => m.CaregiversModule,
),
},
],
},
{
path: 'admin',
component: AdminLayoutComponent,
children: [
{
path: '',
redirectTo: 'users',
pathMatch: 'full'
},
{
path: 'agencies',
loadChildren: () =>
import('./agencies/agencies.module').then(
(m) => m.AgenciesModule
),
},
{
path: 'users',
loadChildren: () =>
import('./admin/admin.module').then(
(m) => m.AdminModule
),
},
],
},
{
path: 'provider-data',
component: HhaLayoutComponent,
children: [
{
path: '',
redirectTo: 'hha-caregivers',
pathMatch: 'full'
},
{
path: '',
loadChildren: () =>
import('./hha-caregivers/hha-caregivers.module').then(
(m) => m.HhaCaregiversModule
),
},
]
},
{
path: 'auth',
loadChildren: () =>
import('./auth/auth.module').then(
(m) => m.AuthModule),
},
];
@NgModule({
imports: [RouterModule.forRoot(routes, {enableTracing: true})],
exports: [RouterModule],
})
export class AppRoutingModule {
}
http-token-interceptor.ts
import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor, HttpErrorResponse, HttpResponse,
} from '@angular/common/http';
import {Observable, throwError} from 'rxjs';
import { AngularFireAuth } from '@angular/fire/auth';
import {catchError, switchMap, take, tap} from 'rxjs/operators';
import {Router} from "@angular/router";
@Injectable()
export class HttpTokenInterceptor implements HttpInterceptor {
constructor(private auth: AngularFireAuth, private router: Router) {}
intercept(
request: HttpRequest<unknown>,
next: HttpHandler
): Observable<HttpEvent<unknown>> {
return this.auth.idToken.pipe(
take(1),
switchMap((token: any) => {
if (token) {
request = request.clone({
setHeaders: {
authorization: `Bearer ${token}`,
},
});
}
return next.handle(request).pipe(tap(() => {},
(err: any) => {
if (err instanceof HttpErrorResponse) {
console.log(err.status);
if (err.status !== 401) {
return;
}
this.router.navigate(['auth/login']);
}
}));
})
);
}
}
auth-routing.module
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import {AuthPipe, customClaims} from "@angular/fire/auth-guard";
import {pipe} from "rxjs";
import {map} from "rxjs/operators";
const hasClaimPipe: (claim: string) => AuthPipe =
(claim) => pipe(customClaims, map((claims) => {
console.log(claims?.role);
return claims?.role === claim
}));
export const newAdminOnly = () => hasClaimPipe('admin') ;
export const superAdminOnly = () => hasClaimPipe('superadmin');
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: 'login', pathMatch: 'full' },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AuthRoutingModule { }
解决方案
正如他控制台中的错误所示,您正在尝试读取空对象的属性 UID,但我在您的代码中看不到 UID 属性,也许在另一个文件中?
推荐阅读
- ios - iOS 应用程序在外部设备上启动时崩溃,但在模拟器上运行良好。“代码签名无效”
- java - 创建具有名称的 bean 时出错,应用程序运行失败。弹簧靴
- python - Python 调试器 (pdb):使用 pdb 浏览多模块代码
- c# - 如何在组合框中绑定多个按钮
- python - 熊猫 Lambda Shift 值
- laravel - Laravel 事件没有响应正文返回到 Stripe
- ruby-on-rails - mongodb ruby delete_all 嵌套文档
- xcode - Xcode 模拟器:持久存储迁移失败,缺少映射模型
- c++ - MySQL C++ 连接器内存泄漏
- reactjs - 错误:(gcloud.app.deploy)错误响应:[9] Cloud build XXXXXXXXXXXXXX 状态:FAILURE