angular2 guard不在页面刷新上工作

发布时间：2020-12-17 17:10:13 所属栏目：安全来源：网络整理

导读：在每个请求之前,我想确保有可用的用户配置文件.我使用canActivateChild防护来做到这一点. 根据angular2的文档,可以返回一个observable：https://angular.io/api/router/CanActivateChild app.routes.ts export const routes: Routes = [ { path: '',canActiv

在每个请求之前,我想确保有可用的用户配置文件.我使用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> with routeLink)时,console.log(‘profile loaded’)可以正常工作.但是,如果我用f5或通过浏览器重新加载页面,它永远不会到达那里..

始终执行console.log(‘load’).

编辑：

如果我在canActivateChild返回：

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

它运行正常…我得到console.log(‘test’)

解决方法

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

import {Observable,ReplaySubject} from 'rxjs/Rx';

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

public isUserLoggedInObs(): Observable<boolean> {
  const userLoggedIn: ReplaySubject<boolean> = new ReplaySubject<boolean>;
  this.loadProfile.first().subscribe(
     user => userLoggedIn.next(user.loggedIn === true)
  )
  return userLoggedIn.asObservable();
}


canActivateChild(childRoute: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean | Observable<boolean>  {
   return this.profileService.isUserLoggedInObs()
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!