路由器防护问题?
Router Guard Issue?
我面临一个情况。我有一个 CanActivate 路由器防护装置。使用守卫会导致整个页面不必要的重新加载。
我实现了两个版本的守卫,发现了一些我不明白的地方。任何人都可以解释这种行为并提出解决方案吗?
这是路由:
const routes: Routes = [{
path: '',
component: DashboardComponent,
children: [{
path: 'overview',
component: OverviewComponent,
},
{
path: 'profile',
canActivate: [TestGuard],
component: ProfileComponent,
},
],
}, ];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class MyRoutingModule {}
保护版本 1(按预期工作):
import {
Injectable
} from '@angular/core';
import {
ActivatedRouteSnapshot,
CanActivate,
RouterStateSnapshot,
} from '@angular/router';
import {
Observable,
of
} from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class TestGuard implements CanActivate {
constructor() {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable < boolean > {
return of(true);
}
}
保护版本 2(重新加载整个页面):
import {
Injectable
} from '@angular/core';
import {
ActivatedRouteSnapshot,
CanActivate,
RouterStateSnapshot,
} from '@angular/router';
import {
Observable,
of
} from 'rxjs';
import {
delay,
map
} from 'rxjs/operators';
@Injectable({
providedIn: 'root',
})
export class TestGuard implements CanActivate {
constructor() {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable < boolean > {
return of(true).pipe(
delay(5000),
map(answer => answer)
);
}
}
我的问题是我需要调用服务(API 请求)。它是由第二个例子中的延迟模拟的。但在这种情况下,它会导致整个页面的重新加载。
我没看到什么?
终于不是问题了。它应该工作。问题出在我们项目的某个地方。
它与延迟加载模块有某种关系。该问题已通过使用 ngxs 并从状态中读取所需信息得到解决。
我面临一个情况。我有一个 CanActivate 路由器防护装置。使用守卫会导致整个页面不必要的重新加载。
我实现了两个版本的守卫,发现了一些我不明白的地方。任何人都可以解释这种行为并提出解决方案吗? 这是路由:
const routes: Routes = [{
path: '',
component: DashboardComponent,
children: [{
path: 'overview',
component: OverviewComponent,
},
{
path: 'profile',
canActivate: [TestGuard],
component: ProfileComponent,
},
],
}, ];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class MyRoutingModule {}
保护版本 1(按预期工作):
import {
Injectable
} from '@angular/core';
import {
ActivatedRouteSnapshot,
CanActivate,
RouterStateSnapshot,
} from '@angular/router';
import {
Observable,
of
} from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class TestGuard implements CanActivate {
constructor() {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable < boolean > {
return of(true);
}
}
保护版本 2(重新加载整个页面):
import {
Injectable
} from '@angular/core';
import {
ActivatedRouteSnapshot,
CanActivate,
RouterStateSnapshot,
} from '@angular/router';
import {
Observable,
of
} from 'rxjs';
import {
delay,
map
} from 'rxjs/operators';
@Injectable({
providedIn: 'root',
})
export class TestGuard implements CanActivate {
constructor() {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable < boolean > {
return of(true).pipe(
delay(5000),
map(answer => answer)
);
}
}
我的问题是我需要调用服务(API 请求)。它是由第二个例子中的延迟模拟的。但在这种情况下,它会导致整个页面的重新加载。 我没看到什么?
终于不是问题了。它应该工作。问题出在我们项目的某个地方。
它与延迟加载模块有某种关系。该问题已通过使用 ngxs 并从状态中读取所需信息得到解决。