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

在所有情况下都尝试返回true / false。

@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));
            }),
        );
    }
}

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

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

1 个答案: