How to store global variable of Angular2 with Service

Question

I use AuthService to connect to my auth server and store the auth state, here is the necessary code:

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 || {};
  }
}

auth-guard.service.ts

@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;
  }
}

When I attempt to log in with name&password, the auth.service.ts says: Cannot read property 'isLoggedIn' of undefined.

I don't know why and when state became undefined.

Answer 1

It looks like your issue stems from this line of code

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

The RXJS documentation for map states:

map(project: function(value: T, index: number): R, thisArg: any): Observable Applies a given project function to each value emitted by the source Observable, and emits the resulting values as an Observable.

Take a look specifically at the definition for the second argument in map. That specifies the "this" pointer.

Since you have it set to this.state, and state doesn't have a property called state, you are getting undefined.

You can pass a lambda which won't try and rebind the this pointer

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

or you can just explicitly pass the correct this pointer as the second argument

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

Answer 2

try

this.extractData.bind(this);

*won't work with with => functions.

Answer 3

The context of this has changed when extractData is called. Use a fat arrow to avoid this.

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