javascript - 阻止应用程序，直到加载用户数据

Question

我正在编写一个 angular2 应用程序。为了对用户进行身份验证，我将 token 存储在本地存储中。该 token 仅包含一些用于识别用户的信息，没有进一步的信息，例如用户 Angular 色等。现在我想将其存档:

当用户(重新)加载页面(任何路由)并且存储了 token 时，我想创建一个 XHR 来检索用户数据。我希望应用程序(路由器？)等待服务器发送数据。

我的问题是:我应该在哪里发出此请求以及如何阻止该应用程序直到服务器响应？

Answer 1

您可以使用防护措施来保护应用程序的特定路由。 守卫有 CanActivate 方法，可以执行异步操作并决定用户是否可以导航到路线。

有关实现的更多详细信息，请参阅 here和 here .

主要思想是为您的应用程序创建子路由，这些路由全部受“AuthGuard”保护，该路由使用存储的 cookie 检索用户信息并验证用户是否已登录。

您也可以引用下面的代码片段:

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { Observable } from 'rxjs';

@Injectable()
export class AuthGuard implements CanActivate {
   constructor(private router: Router, private userDataService: UserDataService ) {}

   canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {


       return Observable.fromPromise(this.userDataService.isUserAuthenticated()).map((isUserAuthenticated: boolean) => {
            return true;
       }).catch( error => {
            this.router.navigate(['/login']);
            return Observable.of(false);
       });
   };
}

此处 isUserAuthenticated 方法返回一个 promise ，当我们从服务器收到包含用户详细信息的响应时，该 promise 将被解析/拒绝