延迟加载模块的路由完全重新加载应用程序

Question

我的路线设置是这样的。

const routes: Routes = [
{
path: '',
redirectTo: '/',
pathMatch: 'full'
},
{
path: 'bank-manager',
loadChildren: () => import('./bank-manager/bank-manager.module').then(m => m.BankManagerModule),
canActivate: [AuthGuard]
},
 {
path: 'account-holder',
loadChildren: () => import('./account-holder/account-holder.module').then(m => 
 m.AccountHolderModule),
canActivate: [AuthGuard]
   },
    {
   path: '**',
   redirectTo: ''
 }
 ];

我有一个连接到 ngrx 商店的登录按钮，并且商店工作正常。当我登录时，商店中设置了所需的值。我希望如果用户未登录，则他们不应该能够转到子路由。所以我有一个像这样设置的 authGuard

    @Injectable()
export class AuthGuard implements CanActivate {
constructor(private store: Store<AppState>, private router: Router) {}

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): Observable<boolean> {
    return this.store.pipe(
    select(isLoggedInSelector),
    tap((loggedIn) => {
        if (!loggedIn) {
            this.router.navigateByUrl('/');
        }
    })
    );
}
}

所以我转到 localhost:4200 然后单击登录，这会根据需要更改商店。但是当我手动转到 localhost:4200/account-holder 它会重新加载整个应用程序并且存储值会丢失。

我在这里做错了什么？

Answer 1

尝试在所有情况下 return 真/假。

@Injectable({
    providedIn: 'root',
})
export class AuthGuard implements CanActivate {
    constructor(
        protected readonly router: Router,
        protected readonly store: Store,
    ) {}

    public canActivate(): Observable<boolean> {
        return this.store.pipe(
            select(isLoggedInSelector),
            distinctUntilChanged(),
            switchMap(flag => {
                if (flag) {
                    return of(flag);
                }
                return from(this.router.navigate(['/'])).pipe(mapTo(false));
            }),
        );
    }
}

如果您的意思是手动 - 您将 url 放入浏览器并打开 angular 应用程序的新副本 - 它不会起作用。商店将数据保存在内存中，您需要一个侧面解决方案来使其持久化，例如您可以使用 ngrx-store-localstorage，然后每次您打开应用程序时，它都会从本地存储中恢复商店。

延迟加载模块的路由完全重新加载应用程序

routes of lazy loaded modules completely re-loads the app

angular

ngrx

ngrx-store