如何创建新的角度服务实例？

Question

So, I'm looking solution for the problem... Ok, let me share my thoughts and possible you could help me or say that I'm wrong.

Introduction:

When you are creating angular apps usually you create the service which calls like AuthService which contain methods login, logout, refreshToken and etc.

But, you also need to store somewhere your current users, it will be user who was logged in your application. Usually you will create something like UserModel with fields like firstname, lastname, balance, group, friends and etc. And so, you are store instance of this model in AuthService.

After that for getting active user you need to inject your Auth service in your @component like this:

constructor(private _authService: AuthService) {
  this.user = this._authservice.user;
}

Yep?

The problem:

So, I do not want inject authService for getting current user. I want to have CurrentUser service which will be allowed across all modules and will contain everything about logged user like UserModel.

I want something like this:

constructor(public user: UserService) {
}

BUT when user do logout I need to cleanup UserService and re-initialize every field to default value. So, this step it is a real problem. Yes, sure, I can do for... in cycle by object fields, but it's sucks. I want to create new instance of UserService and make re-assign in global scope.

If you still do not understand - UserService was declared as provider in my root AppModule like this:

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  providers: [
    UserService
  ]
})
export class AppModule {}

Question: How can I create new instance for UserService and replace it in global?

When user logout I want to do this and all my components will get new, clean instance of UserService without filled fields and etc. And when new user will be logged in I'll use method of UserService class like user.updateUser(data) for filling this instance.

Answer 1

This can be achieved by declaring the service UserService to the highest level component your user is directed to after logging in (say HomeComponent). Continue to declare your authService as a provider in your root app.module.ts so it remains a singleton for the entire application life time.

By doing this the UserService will be created each time a User logs in and it will be available to all the children of the home component (which is why you will want to be sure to provide it at the highest level component), and it will be destroyed each time a user logs out. Creating a singleton for each user session.

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [UserService]
})
export class HomeComponent {...}

I want to stress the highest level component. Essentially from an Architecture perspective what you would want to do is (in this example) be sure to make the HomeComponent essentially a container component for all routes/components a logged in user would need to access thereafter. Otherwise, this technique will not succeed for say sibling components, as the sharing of the UserService is dependent upon the hierarchical component structure.

Answer 2

I think the real question is why would you want this behaviour?

If it's regarding state then you should use a state management tool for this like ngrx or ng2redux so that the state is abstracted away from your components and services.

Then you can cleanly logout and login with different events and handle what should happen with the states upon each action.

Answer 3

try to make use of BehaviorSubjects. this should go in your service class:

public userData: new BehaviorSubject({});

once you get the logged in user data, store in the behavior subject like this

in the component:

this.userService.userData.next(response);

and when you need to fetch it across other components, just use this:

this.userService.userData.value();

NB: when the user refreshes, be it a service or a behavior subject, all will refresh. so, try using it in seasion storage or in Node cache.