Angular 2 服务价值不持久
Angular 2 Service value not persisting
我创建了一项服务来处理获取用户并检查他们的权限。当我在我的应用程序中使用它时,我希望在整个应用程序中保留的值似乎会重置回我每次调用 getUser()
方法时的值。
我的服务代码是:
import { Injectable } from '@angular/core';
import { MyHttp } from '../my-http/my-http.service';
import { Response } from '@angular/http';
import { MyAuth } from '../my-auth.service';
import { MyAuthUser } from './my-auth-user.ts';
import { Observable } from 'rxjs';
@Injectable()
export class MyUserService {
private currUser: MyAuthUser = {
id: 'UNAUTHENTICATED_USER',
name:'Anonymous',
roles: []
};
constructor(private http: MyHttp, private auth: MyAuth) {}
public extractData(res: Response): MyAuthUser {
let user = res.json();
this.currUser = Object.assign({}, user)
return this.currUser;
}
public getUser(): Observable<MyAuthUser> {
// Check if we already have user
if(this.currUser.id === 'UNAUTHENTICATED_USER') {
// Get user from tokeninfo endpoint
return this.http.get('/myuserendpoint')
.map(this.extractData);
}
else {
// Either user is unauthenticated or user already exists, either way send back whatever is in this.currUser
return Observable.create((observer:any) => {
observer.next(this.currUser);
observer.complete();
});
}
}
public hasRole(role: string): boolean {
if(!this.currUser || this.currUser.id === 'UNAUTHENTICATED_USER') {
throw new Error('User roles is undefined, make sure you call getUser');
}
return !!~this.currUser.roles.indexOf(role);
}
}
我将其添加为我应用程序的 bootstrap 方法中的提供程序:
bootstrap(MyAppComponent, [MyUser, ...]);
然后我在我的根组件中使用它来获取用户并检查他们是否具有特定角色:
constructor(private userService: MyUser) {
this.userService.getUser().subscribe((user) => {
this.user = user;
let isDeveloper = this.userService.hasRole('developer');
console.log('IS DEV?: ', isDeveloper);
});
}
因此用户成功返回并设置为 this.user
,但是当我 运行 应该只检查服务的 currUser
值的 hasRole()
方法时,它以某种方式再次重置为 UNAUTHENTICATED_USER
。我不明白为什么这个值不会从一个方法调用持续到下一个方法调用。
我不是很精通 observables,所以我不知道是不是我正在做的事情弄乱了它还是什么。
如果传递的方法引用“this”,以这种方式传递方法引用会导致麻烦
.map(this.extractData);
改用
.map(() => this.extractData())
或者如果需要接受一个参数
.map((x) => this.extractData(x))
这样 this
的范围就被保留了。
我创建了一项服务来处理获取用户并检查他们的权限。当我在我的应用程序中使用它时,我希望在整个应用程序中保留的值似乎会重置回我每次调用 getUser()
方法时的值。
我的服务代码是:
import { Injectable } from '@angular/core';
import { MyHttp } from '../my-http/my-http.service';
import { Response } from '@angular/http';
import { MyAuth } from '../my-auth.service';
import { MyAuthUser } from './my-auth-user.ts';
import { Observable } from 'rxjs';
@Injectable()
export class MyUserService {
private currUser: MyAuthUser = {
id: 'UNAUTHENTICATED_USER',
name:'Anonymous',
roles: []
};
constructor(private http: MyHttp, private auth: MyAuth) {}
public extractData(res: Response): MyAuthUser {
let user = res.json();
this.currUser = Object.assign({}, user)
return this.currUser;
}
public getUser(): Observable<MyAuthUser> {
// Check if we already have user
if(this.currUser.id === 'UNAUTHENTICATED_USER') {
// Get user from tokeninfo endpoint
return this.http.get('/myuserendpoint')
.map(this.extractData);
}
else {
// Either user is unauthenticated or user already exists, either way send back whatever is in this.currUser
return Observable.create((observer:any) => {
observer.next(this.currUser);
observer.complete();
});
}
}
public hasRole(role: string): boolean {
if(!this.currUser || this.currUser.id === 'UNAUTHENTICATED_USER') {
throw new Error('User roles is undefined, make sure you call getUser');
}
return !!~this.currUser.roles.indexOf(role);
}
}
我将其添加为我应用程序的 bootstrap 方法中的提供程序:
bootstrap(MyAppComponent, [MyUser, ...]);
然后我在我的根组件中使用它来获取用户并检查他们是否具有特定角色:
constructor(private userService: MyUser) {
this.userService.getUser().subscribe((user) => {
this.user = user;
let isDeveloper = this.userService.hasRole('developer');
console.log('IS DEV?: ', isDeveloper);
});
}
因此用户成功返回并设置为 this.user
,但是当我 运行 应该只检查服务的 currUser
值的 hasRole()
方法时,它以某种方式再次重置为 UNAUTHENTICATED_USER
。我不明白为什么这个值不会从一个方法调用持续到下一个方法调用。
我不是很精通 observables,所以我不知道是不是我正在做的事情弄乱了它还是什么。
如果传递的方法引用“this”,以这种方式传递方法引用会导致麻烦
.map(this.extractData);
改用
.map(() => this.extractData())
或者如果需要接受一个参数
.map((x) => this.extractData(x))
这样 this
的范围就被保留了。