我们可以将 getUserByToken 函数的返回值缓存起来,以避免对该函数的多次调用。示例代码如下:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AuthService {
private cachedUser: any; // 缓存用户信息
constructor(private http: HttpClient) { }
public login(username: string, password: string): Observable {
return this.http.post('/api/auth/login', {username, password}).pipe(
tap(token => localStorage.setItem('auth_token', token))
);
}
public getUserByToken(token: string): Observable {
if (this.cachedUser) { // 如果缓存中已经有数据,直接返回
return of(this.cachedUser);
}
return this.http.get('/api/auth/user', {
headers: {
Authorization: `Bearer ${token}`
}
}).pipe(
tap(user => this.cachedUser = user)
);
}
public logout(): void {
localStorage.removeItem('auth_token');
this.cachedUser = null; // 退出登录时清空缓存
}
}
在上面的代码中,我们在 getUserByToken 函数中添加了一个缓存,在第一次调用该函数时,我们会从服务器获取用户信息并将其缓存起来,后续调用该函数时直接从缓存中获取用户信息,避免重复调用。另外,在退出登录时清空缓存,以便再次登录时重新获取缓存。