如何用服务存储Angular2的全局变量

我使用AuthService连接到我的auth服务器并存储auth状态，以下是必要的代码：

auth.service.ts

@Injectable()
export class AuthService {

  state = {
    isLoggedIn: false,
    redirectUrl: ''
  };


  private authUrl = 'http://localhost:3000/admin/auth'; 

  constructor(private http:Http) {

    this.state.isLoggedIn = false;
    this.state.redirectUrl = '';
  }

  auth(name:string, password:string):Observable<Auth> {

    let headers = new Headers({'Content-Type': 'application/json'});
    let options = new RequestOptions({headers: headers});

    return this.http.post(this.authUrl, {name: name, pw: password}, options)
      .map(this.extractData, this.state)
      .catch(this.handleError);
  }

  extractData(res:Response) { // <-- this.state become undefined

    let body = res.json();

    this.state.isLoggedIn = (body.res == 0); // <-- Cannot read property 'isLoggedIn' of undefined

    return body || {};
  }
}

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private authService:AuthService, private router:Router) {
  }

  canActivate(route:ActivatedRouteSnapshot, stateSnapshot:RouterStateSnapshot):boolean {

    // this.authService.state.isLoggedIn: false
    // this.authService.state.redirectUrl: ''

    let url:string = stateSnapshot.url;

    return this.checkLogin(url);
  }

  checkLogin(url:string):boolean {

    // this.authService.state.isLoggedIn: false

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

    // Store the attempted URL for redirecting
    this.authService.state.redirectUrl = url;

    // this.authService.state.redirectUrl: '/admin'

    // Navigate to the login page with extras
    this.router.navigate(['/admin/auth']);
    return false;
  }
}

当我尝试使用名称和密码登录时，auth.service.ts显示：

无法读取未定义的属性“isLoggedIn”

我不知道为什么以及何时
状态
变得未定义。
看起来您的问题源于这一行代码

return this.http.post(this.authUrl, {name: name, pw: password}, options)
  .map(this.extractData, this.state) //<-- right here
  .catch(this.handleError);

看起来您的问题源于这一行代码

return this.http.post(this.authUrl, {name: name, pw: password}, options)
  .map(this.extractData, this.state) //<-- right here
  .catch(this.handleError);

试一试

*无法使用=>函数。
请尝试

*无法与=>函数一起使用。
调用提取数据时，此上下文已更改。使用一个简单的方法来避免这种情况

     return this.http.post(this.authUrl, {name: name, pw: password}, options)
      .map((res) => this.extractData(res))
      .catch(this.handleError);

调用extractData时，此上下文已更改。使用一个简单的方法来避免这种情况

     return this.http.post(this.authUrl, {name: name, pw: password}, options)
      .map((res) => this.extractData(res))
      .catch(this.handleError);

     return this.http.post(this.authUrl, {name: name, pw: password}, options)
      .map((res) => this.extractData(res))
      .catch(this.handleError);