![](/img/trans.png)
[英]Angular 2 router - When logged out and a user tries to navigate to a logged in page I need the app.ts to redirect
[英]trying to redirect to login page in Angular only when logged out
我的 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 { }
正如控制台中的错误所示,您正在尝试读取空对象的 prpoerty UID,但我在您的代码中看不到 UID prpoerty,也许在另一个文件中?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.