[英]How to store global variable of Angular2 with Service
I use AuthService to connect to my auth server and store the auth state, here is the necessary code: 我使用AuthService连接到我的身份验证服务器并存储身份验证状态,这是必要的代码:
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 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
. 当我尝试使用名称和密码登录时, auth.service.ts说:
Cannot read property 'isLoggedIn' of undefined
。
I don't know why and when state
became undefined. 我不知道为什么以及何时
state
变得不确定。
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: 用于地图状态的RXJS文档:
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.
map(project:function(value(T:index,number)):R,thisArg:any):可观察的将给定的项目函数应用于源Observable发出的每个值,并将结果值作为Observable发出。
Take a look specifically at the definition for the second argument in map. 专门看看map中第二个参数的定义。 That specifies the "this" pointer.
指定“ this”指针。
Since you have it set to this.state, and state doesn't have a property called state, you are getting undefined. 由于已将其设置为this.state,并且state没有名为state的属性,因此您将无法定义。
You can pass a lambda which won't try and rebind the this pointer 您可以传递不会尝试重新绑定此指针的lambda
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 或者您可以显式地传递正确的this指针作为第二个参数
return this.http.post(this.authUrl, {name: name, pw: password}, options)
.map(this.extractData, this)
.catch(this.handleError);
try 尝试
this.extractData.bind(this);
*won't work with with => functions. *不适用于=>函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.