2

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

在用户身份验证中，我正在设置一个像这样的会话变量：

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

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

这是我要调用的 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：我今天做了一个类似的帖子，但它是针对不同的问题，所以我将它链接到这里以避免混淆：Managing user authenticated state on manual URL navigation

4

1 回答 1

1

调用subscribe()不会自动给出值。如果这调用了对服务器的请求，则在响应到达之前需要很长时间。浏览器继续执行你的代码，当最终来自服务器的响应到达时，传递给的回调subscribe(...)被 observable 调用。你需要让你的 AuthGuard 通过返回 observable 来等待 observable 或者实际上是路由器，canActivate()这样路由器才能等待 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());
  }
}

请参阅在 RxJs 5 中共享 Angular 2 Http 网络调用结果的正确方法是什么？有关如何缓存 HTTP 请求结果的更多详细信息。

于 2016-08-26T13:22:48.227 回答