Question

我正在Web应用程序中设置一个简单的登录名。用户登录后，可以选择注销应用程序。但是，当调用登录组件时，我首先验证用户是否已经登录，因此可以将其发送到主页。因此，当我尝试注销时，无法正确清除此用户。这样，用户不会再次发送到登录页面。如果我刷新浏览器，则可以正常工作。

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
    private currentUserSubject: BehaviorSubject<AuthUser>;
    public currentUser: Observable<AuthUser>;

    constructor(
        private _httpClient: HttpClient
    ) {
        this.currentUserSubject = new BehaviorSubject<AuthUser>(
            JSON.parse(localStorage.getItem('currentUser'))
        );
        this.currentUser = this.currentUserSubject.asObservable();
    }

    public get currentUserValue(): AuthUser {
        return this.currentUserSubject.value;
    }

    login(loginRequest): Promise<any> {
        //http call then...
        this.currentUserSubject.next(response);
    }

    logout() {
        localStorage.removeItem('currentUser');
        this.currentUserSubject.next(null);

        //THIS LOGS NULL
        console.log(this.currentUserValue);
    }
}

然后，当我从另一个组件调用authService.logout（）时：

logout(): void {
    this._authService.logout();
    this.router.navigate(['/auth/login']);
}

此路由转到LoginComponent，如下所示：

export class LoginComponent implements OnInit {
    constructor(private _authService: AuthenticationService) {
        let loggedUser;
        this._authService.currentUser.subscribe(user => {
            loggedUser = user;
        });

        //THIS LOGS THE OLD OBJECT
        console.log(this._authService.currentUserValue);
        //THIS ALSO LOGS THE OLD OBJECT
        console.log(loggedUser);
        if (loggedUser) {
            this.router.navigate(['/home']);
        }
   }
}

如何在LoginComponent中获取新的null值？

Answer 1

如评论中所述，问题源于在多个位置提供了AuthenticationService。通过@Injectable({ providedIn: 'root' })代码在应用程序根目录中找到一个位置。第二个是通过AuthModule数组在providers中。

Angular docs讨论了服务注册的性质及其以不同方式提供服务时的含义：

@Injectable({ providedIn: 'root' })-在整个应用程序中创建服务的单个共享实例。
@NgModule({ providers: [...] })-在模块中的所有组件之间创建服务的单个共享实例。
@Component({ providers: [...] })-与组件的每个实例一起创建服务的新实例。

我为Angular Service属性获得了两个不同的值

1 个答案: