Question

我试图在Angular应用程序中实现Auth guard。我使用ngrx来保存我的用户信息。

canActivate（route：ActivatedRouteSnapshot，state：RouterStateSnapshot）：Observable {

const userIsLoggedInApplication = this.oAuthService.getIdentityClaims() ? true : false;

//Check if application is aware OIDC token
if (!userIsLoggedInApplication) {
    this.saveWhereUserWantedToGo(route, state);
    //Stat oAuth flow
    this.oAuthService.initImplicitFlow();

    //Retun observable of false for guard
    return of(false);
}
else {
    //Select user profile
    return this.store.select(formRoot.getUserInfo).pipe(
        tap((account: AccountVM) => {
            //If user profile is not found in store, dispach action for retriving it
            if (!account) {
                this.store.dispatch(new formRoot.GetUserProfile());
            }
            this.logger.debug('Auth guard: account not found. Action for get user info dispached');
            return account;
        }),
        //Wait until account is retrievied in store
        filter((account: AccountVM) => account !== null && account !== undefined),
        take(1),
        switchMap((account: AccountVM) => {
            this.logger.debug('Auth guard: account is loaded.', account);
            //Check user status. If status is in processing return to registration page
            if (account.userStatus === Status.Processing && state.url.indexOf('registration') === -1) {
                this.store.dispatch(new formRoot.Go({ path: ['/registration'] }));

                this.logger.debug('Auth guard: user is redirecting to registration.', account);
                return of(false);
            }

            this.logger.debug('Auth guard: user is authenticated.', account);
            return of(true);
        })
    );
}

}

正如您在第一时间看到的那样，如果用户检查用户是否经过身份验证（在我正在使用的OIDC库中）。这部分工作正常。在else块中，我在ngrx商店调用select方法以获取用户配置文件信息。

在tap方法中，我检查帐户是否未定义。如果是这种情况，我会调度用于获取用户配置文件信息的操作。然后我退回这个帐户。下一个方法是filter。这里的想法是等到帐户信息是！== undefined。之后，我致电take(1)，然后致电switch map。此方法检查用户状态，状态为ok，返回of(true)。

当我通过调试器时，我看到切换Map方法返回（true）。并且Angular路由器输出成功通过了防护，但在此之后又出现了另一个表示NavigationCanceled的事件。

Picture of logs

路由器模块

    const routes: Routes = [
    {
        path: 'pero',
        component: PeroComponent,
        canActivate: [AuthGuard]
    },
    {
        path: 'loading',
        component: LoadingComponent
    },
    {
        path: 'unauthorized',
        component: UnauthorizedComponent
    },
    {
        path: 'welcome',
        component: WelcomeComponent,
    },
    {
        path: 'registration',
        component: RegistrationComponent,
        canActivate: [AuthGuard, TranslateGuard],
        resolve: { userProfile: UserProfileResolve }
    },
    {
        path: '',
        redirectTo: 'welcome',
        pathMatch: 'full'
    },
    {
        path: '',
        canActivate: [TranslateGuard],
        component: PortalComponent,
        children: [
            {
                canActivate: [AuthGuard],
                path: 'error',
                component: ErrorComponent
            },
            {
                path: 'eForms',
                loadChildren: 'app/e-forms/e-forms.module#EFormsModule'
            },
            {
                path: 'home',
                loadChildren: 'app/home/home.module#HomeModule'
            },
            {
                path: 'profile',
                loadChildren: 'app/profile/profile.module#ProfileModule'
            }
        ]
    },
    {
        path: '**',
        component: NotFoundComponent
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { enableTracing: true })],
    exports: [RouterModule],
    providers: [UserProfileResolve]
})
export class AppRoutingModule { }

我找到了类似的例子和问题，但我无法弄清楚我做错了什么。

StackOwerflow question

Example code

如果有人有任何想法，请帮助：）

守卫返回后取消Angular 5导航可观察到真

0 个答案: