我正在开发一个Angular 9应用程序,并尝试仅在我的应用状态(ngrx)具有属性!= null时加载特定模块。
首先,在我的路由中有一个AuthGuard,但使用canActivate。因此,我希望仅在我的AppState拥有一个令牌时才加载“dashboard”模块。
这是我的路由文件:
const routes: Routes = [
{
path: '',
component: AppLayoutComponent,
canActivate: [ AuthGuard ],
children: [
{ path: '', loadChildren: () => import('./pages/modules/dashboard/dashboard.module').then(m => m.DashboardModule) }
]
},
{
path: '',
component: AuthLayoutComponent,
children: [
{ path: 'session', loadChildren: () => import('./pages/modules/session/session.module').then(m => m.SessionModule) }
]
},
{
path: '**',
redirectTo: 'session/not-found'
}];
这是我的AuthGuard。如果本地存储没有会话,则重定向到登录页面。
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router, public authService: AuthService) {}
public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (localStorage.getItem('session')) {
// logged in so return true
return true;
}
// not logged in so redirect to login page with the return url
this.router.navigate(['session/signin']);
return false;
}
}
这就是我想在AuthModuleGuard中使用canLoad实现的内容,但是这并不起作用。
public canLoad(): Observable<boolean> {
return this.store.select('session').pipe(
take(1),
map((authstate) => {
console.log('Token status', authstate.token);
if (authstate.token !== null) {
return true;
} else {
this.router.navigate(['session/signin']);
return false;
}
})
);
}
如果我这样做......应用程序会报错,但仍然加载了两个文件。
{
path: '',
component: AppLayoutComponent,
canLoad: [ AuthModuleGuard ],
children: [ ... ]
}
如果我这样做...应用程序永远无法完成加载
{ path: '', canLoad: [ AuthModuleGuard ], loadChildren: () => import('./pages/modules/dashboard/dashboard.module').then(m => m.DashboardModule) },
这里有一个StackBlitz例子(包括我的文件夹结构)---> https://stackblitz.com/edit/angular-ivy-nasx7r
我需要一种在仅当存储中的令牌设置时才加载仪表板模块(和其他模块)的方法,如果没有设置,则重定向到登录页。 请帮忙。
canLoad
要么是包含loadChildren
的路由的属性,要么可以在父级路由中,并使用canLoadChildren
。 - Aluan HaddadcanLoad
看起来没问题。问题可能出在其他地方,请你创建一个 StackBlitz demo? - Andrei Gătej