如何在使用 Angular 2+ 的身份验证服务之后加载路由器之前获取数据？答案

【问题标题】：How to get data before Router is loaded after Auth Service using angular 2+?如何在使用 Angular 2+ 的身份验证服务之后加载路由器之前获取数据？
【发布时间】：2017-12-07 04:39:34
【问题描述】：

我希望这不会重复。

我有这个组件可以让用户登录，它调用服务并给我一个令牌。

登录成功后，我将令牌保存到 localStorage，并使用 getUserData 服务获取用户数据，然后使用 saveUderData 服务将其保存到 localStorage。

  onLoginSuccess(token: Token) {

    this.authService.saveToken(token);

    this.authService.getUserData().subscribe(
      userData =>  this.onGetUserDataSuccess(userData)
    );
  }

  onGetUserDataSuccess(userData: UserDataModel) {
    this.authService.saveUserData(userData);
    this.router.navigate(['/'])
  }

问题是当我转到主要组件时，数据不是已加载，我必须刷新页面。

我的主要组件中有这个。

if (localStorage.getItem('_UserToken') && localStorage.getItem('_UserData') && (!this.authService.userToken || !this.authService.userToken.access_token)) {
      this.authService.saveToken(JSON.parse(localStorage.getItem('_UserToken')));
      this.authService.saveUserData(JSON.parse(localStorage.getItem('_UserData')));

      this.userData = this.authService.userData;

    }

this.userData 我得到了数据。

我在另一个组件中使用Resolve 解决了它，但在这里我不能这样做，因为我不知道如何。

我在onLoginSuccess(token: Token)尝试过这个

this.route.data.subscribe(
      userData => console.log(userData['user'])
    );

但是userData是undefined

这是我的路线。

const appRoutes: Routes = [
  {path: '', canActivate: [AuthGuardService], data: { title: 'Inicio'}, resolve: {user: UserDataResolve},
    children: [
      {path: '', component: HomeComponent},
      {path: '', component: MenuComponent},
    ]},
  {path: 'login', component: LoginComponent, data: { title: 'Iniciar Sesión'} },

];

这是我的决心

@Injectable()
export class UserDataResolve implements Resolve<UserDataModel> {

  constructor(private authService: AuthService) {}

  resolve(route: ActivatedRouteSnapshot): Observable<UserDataModel> {
    return this.authService.getUserData();
  }

}

我希望你能理解我，我的英语不是最好的。谢谢 =)。

【问题讨论】：

标签： javascript angular angular2-routing

【解决方案1】：

尝试在组件中使用 getter 而不是简单的属性：

get userData(): string {
    this.authService.userData;
}

这样，任何时候检测到更改都会从您的服务中获取当前的 userData。

【讨论】：