angular - 在 Ionic 4 / Angular 应用程序中使用 Observables 的正确方法
问题描述
所以有一个使用 Ionic/Angular 创建的简单应用程序。
有包含用户电话的app.component.html (菜单):
<span *ngIf="phone">{{phone}}</span>
和app.component.ts:
public phone: string = ''
initializeApp() {
this.platform.ready().then(() => {
this.getUser()
});
}
getUser() {
if(this.auth.isLoggedIn) {
this.auth.getUser()
.subscribe(
user => {
this.phone = user.phone
}
)
}
}
认证服务:
public isLoggedIn: boolean = false
public token: string = null
getUser(): Observable<User> {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Token': this.token
})
return this.http
.get<User>(this.util.API_URL + '/user', { headers } )
.pipe(
map(
res => {
// api returns json response with 'result' object
return res['result']
}
)
)
}
应用启动时我需要从 app.component.ts 调用 getUser() 方法的问题。如果用户已登录,它现在可以工作了。但是当用户未登录时,我需要在用户登录成功后调用 getUser() 方法。但是,例如,我不能在 LoginComponent 的 initializeApp() 之前调用 AppComponent。
那么,在 AppComponent 中显示用户数据的正确方法是什么?
解决方案
身份验证服务:
export class AuthService {
private currentTokenSubject = new BehaviorSubject<string>(null); // <-- assign default value here
constructor(
private http: HttpClient,
private storage: Storage,
) {
this.getToken().then(
res => {
this.currentTokenSubject.next(res); // <-- push token to the observable
}
);
}
async getToken() {
return await this.storage.get('accessToken');
}
public get currentTokenValue(): Observable < string > {
return this.currentTokenSubject.asObservable(); // <-- return observable here
}
login(username: string, password: string) {
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': 'Basic ' + btoa(username + ':' + unescape(encodeURIComponent(password)))
})
return this.http.post<Token>(`${environment.apiUrl}/auth/signin`, {}, { headers }).pipe(
map((res: Token) => {
let token = res.token;
// store user details and jwt token in local storage to keep user logged in between page refreshes
this.storage.set('accessToken', token);
this.currentTokenSubject.next(token); // <-- also push new token here?
return token;
}));
}
logout() {
// remove user from local storage to log user out
this.storage.remove('accessToken');
this.currentTokenSubject.next(null);
}
}
推荐阅读
- tree - 二叉搜索树插入有问题,左树工作正常,右树不行
- swift - 按下按钮后如何使图片出现在单元格中
- python - 如何在 configparser 参数上设置列表(不是字符串)
- google-sheets - 如果匹配值与其他单元格匹配,则从其他工作表中获取其他单元格的值
- vhdl - 如何在 if 语句中检查输出信号的条件
- angular - 如何以角度修复“对象不可用”?
- python - 无法在python中实现Multiprocessing(参数不正确)
- php - 如何更改按钮的默认 Wordpress 登录页面链接?
- python-3.x - 为什么我在 Python 中得到重复的输出?
- mysql - 如何使用 mySQL 获取 Wordpress 缩略图