Question

我有一个带有身份验证服务的Angular应用程序，我在其中处理用户状态-

@Injectable()
export class AuthService extends HttpService<User> {

    private readonly _user: BehaviorSubject<User>;

    public user$: Observable<User>;

    constructor(http: HttpClient) {
    super(http, 'users');
    this._user = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('user')));
    this.user$ = this._user.asObservable();
    }

    signIn(email: string, password: string): Observable<User> {
    return this.http.post<User>(this.path + '/login', { email: email, password: password})
        .pipe(map(user => {
        if (user && user.token) {
            localStorage.setItem('token', user.token);
            localStorage.setItem('user', JSON.stringify(user));
            this._user.next(user);
        }
        return user;
        }));
    }
}

现在在我的登录组件中，它可以正常工作，并且用户成功返回-

export class SignInComponent {

    constructor(private auth: AuthService, private router: Router) { }

    signIn(email: string, password: string): void {
    this.auth.signIn(email, password).subscribe(user => {
        this.loading = false;
        this.router.navigate(['/pages/dashboard']);
    }, error => {
        this.failed = true;
        this.loading = false;
    });
    }
}

但是，在用户可观察到的符号为null之后，在我重定向到的组件中-

export class DashboardComponent implements OnInit {

    constructor(
        private authService: AuthService,
    ) { }

    ngOnInit() {

        this.authService.user$.subscribe(user => {
            console.log(user); // <- the user here is null!
        })
    }
}

如果刷新浏览器，则成功返回用户对象。

我假设您可以通过这种方式在组件之间共享数据，但事实并非如此。我将如何实现？

我还应该说登录和仪表板组件位于不同的模块中。

Answer 1

但是，在用户可观察到的符号为null之后，在我重定向到的组件中

可能是因为其ngOnInit在发出后 user$后运行。您需要一个 ReplaySubject ，而不是一个 BehaviorSubject 。

顺便说一句，您可以替换您的map

.pipe(map(user => {
    if (user && user.token) {
        //...

使用tap，将使return语句不再需要。

Angular共享服务不更新值

1 个答案: