angular2防护不适用于页面刷新 [英] angular2 guard not working on page refresh

问题描述

在每次请求之前，我都要确保有可用的用户个人资料.我使用canActivateChild守护程序来做到这一点.

Before every request I want to be sure that there is a user profile available. I use a canActivateChild guard to do this.

根据angular2的文档，可以返回可观察到的结果: https://angular.io /api/router/CanActivateChild

According to the documentation of angular2 it is possible to return an observable: https://angular.io/api/router/CanActivateChild

app.routes.ts

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:

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或通过浏览器重新加载页面，它将永远无法到达页面.

When I navigate through the menu (<a> with routeLink) the console.log('profile loaded') works. But if I reload the page with f5 or through the browser, it never gets there..

总是执行console.log('load').

编辑:

如果我在canActivateChild中返回:

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

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

It works fine... I get the console.log('test')

推荐答案

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

I was running on a RC of @angular/router. After i updated this it worked like expected.

这篇关于angular2防护不适用于页面刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！