Question

在每次请求之前，我都希望确保有可用的用户个人资料。我使用canActivateChild防护来做到这一点。

根据angular2的文档，可以返回一个observable：https://angular.io/api/router/CanActivateChild

app.routes.ts

export const routes: Routes = [
  {
    path: '',
    canActivateChild: [ProfileGuard],
    children: [
      {
        path: 'home',
        component: HomeComponent,
        canActivate: [AuthGuard]
      },
      {
        path: 'login',
        component: LoginComponent,
        canActivate: [GuestGuard]
      },
 }
];

canActivatedChild在子路由canActivate

之前执行

profile.guard.ts：

export class ProfileGuard implements CanActivateChild {

  constructor(private profileService: ProfileService, private snackbar: MdSnackBar) { }

  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean>  {

    if (this.profileService.user == null && localStorage.getItem('__token') != null) {
      return this.profileService.loadProfile().map((user) => {
        console.log('profile loaded');
        this.profileService.user = <UserModel>user.data;
        return true;
      });
    }
    return true;
  }

}

加载配置文件功能：

  public loadProfile(): Observable<any> {
    console.log('load');
    return this.http.get('/profile').map(res => res.json());
  }

当我浏览菜单（<a>并routeLink）时，console.log('profile loaded')正常工作。但是，如果我用f5或通过浏览器重新加载页面，它永远不会到达那里..

始终执行console.log('load')。

修改：

如果我在canActivateChild返回：

return Observable.of(true).map(() => {
  console.log('Test');
  return true;
});

工作正常......我得到了console.log('test')

Answer 1

我认为它会在您收到回复之前解决，尝试添加一个重播主题，一旦您的请求返回，该主题会解析为真或假

ProgrammingError at /my_app/
relation "my_app_myappmodel" does not exist
LINE 1: INSERT INTO "my_app_myappmodel" ("field1", "field2", "field3") VALUES...

Answer 2

我在@angular/router的RC上运行。我更新后，它的工作就像预期的那样。

angular2 guard不在页面刷新上工作

2 个答案: