Question

我正在写一个angular2应用程序。要对用户进行身份验证，我将令牌存储在本地存储中。此令牌仅包含一些用于标识用户的信息，不包含用户角色等其他信息。现在我想归档这个：

当用户（重新）加载页面（任何路由）并且存储了令牌时，我想创建一个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，当我们从服务器获得带有用户详细信息的响应时，它将被解析/拒绝

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

1 个答案: