在引导后路由之前更新 Angular2 服务布尔值

Question

我将 Angular2 与 ASP.NET 核心 MVC 一起使用，管理手册 URL 导航工作正常，服务器正在使用 Angular2 成功加载我的主页视图。

关于用户身份验证，我正在设置一个会话变量，如下所示：

HttpHelper.HttpContext.Session.SetString("isLoggedIn", true.ToString() );

我想要的是，在用户进入应用程序后，如果他想通过手动导航加载特定路线，我希望我的服务调用我的 ASP 控制器来检查是否用户已经通过身份验证，因此我的守卫允许路由。相反，守卫默认设置为 false，我显然被重定向到我的登录页面。

这是我的 ASP 控制器方法，我想调用它来更新 auth.service 中的 IsLoggedIn 值：

[HttpGet]
public IActionResult IsConnectedState()
{
    if (!String.IsNullOrWhiteSpace(HttpHelper.HttpContext.Session.GetString("isLoggedIn")))
        return Ok(true);
    else
        return Ok(false);
}

以便我的 AuthenticationGuard 可以调用 AuthenticationService 来更新管理已验证状态的布尔值：编辑：粘贴整个 auth.guard.ts 代码以获得更清晰的解释

@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {
    if (!this.authService.isLoggedIn) {
        this.authService.setupLoggedInState().subscribe(() => {
            alert("guard check : " + this.authService.isLoggedIn);
            });
        }
    }

    canActivate()
    {
        if (this.authService.isLoggedIn) {
            return true;
        }

        this.router.navigate(['/login']);
        return false;
    }
}

使用以下代码更新我的 auth.service 中的布尔值：

setupLoggedInState() {
    alert("Setting Up");

    // Setting up the Http call 
    let lControllerAction: string = "/IsConnectedState";
    let lControllerFullURL: string = this.controllerURL + lControllerAction;
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    // Call my ASP Controller IsConnectedState() method
    return this.http.get(lControllerFullURL, options)
        .map((res: any) => {
            // Réponse reçue du WebService
            let data = res.json();
            alert(data);
            if (data == true) {
                this.isLoggedIn = true;
            }
        }
        ).catch(this.handleError);
}

当我尝试手动加载受保护的路由时出现问题，在我的服务中的布尔值更新之前，我被重定向到登录页面。我不知道我可以设置什么样的解决方案来解决这个问题...

我试着打电话给

if (!this.authService.isLoggedIn) {
    this.authService.setupLoggedInState().subscribe(() => { });
}

在我的守卫构造函数中
在我的服务构造函数中

但它仍然没有在适当的时候这样做。我最好的猜测是在我加载我的第一个 AppModule 时管理它，但即使这可能是正确的时刻，我也不能保证我的布尔值会在 Angular2 完成引导时更新，并且进行同步 Http 调用似乎是一个非常糟糕的解决方案，因为它会阻止浏览器...... 任何想法都会很有帮助。

PS : 我今天做了一个类似的 post ，但它是针对不同的问题，所以我会 link 在这里避免混淆：

Answer 1

调用 subscribe() 不会自动给出值。如果这会调用对服务器的请求，则需要 loooong 时间才能收到响应。浏览器继续执行您的代码，当最终来自服务器的响应到达时，传递给 subscribe(...) 的回调被可观察对象调用。您需要通过从 canActivate() 返回 observable 让 AuthGuard 等待 observable 或者实际上是路由器，这样路由器就可以等待 observable 发出响应。

@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {
  canActivate() {
    return this.authService.checkLoggedIn
    .map(loggedIn => {
      if(loggedIn) {
        return true;
      } else {
        this.router.navigate(['/login']); // not tried myself to navigate here
        return false;
      }
    });
  }
}


@Injectable()
class LoginService {
  constructor(private http:Http) {}

  checkLoggeIn() {
    return.http.get(someUrl).map(val => val.json());
  }
}

有关如何缓存来自 HTTP 请求的结果的更多详细信息，请参阅。

在引导后路由之前更新 Angular2 服务布尔值

Update Angular2 Service boolean before routing after bootstrapping

angular

asp.net-core-mvc

angular2-routing

angular2-guards