Angular 2: lost component information after refresh

Question

I have a app.component that manage a header with menu. The html of this component conditionally check if the variable "isAdmin" and "isAuthenticated" are true so can enable/disable every menu link.

When i login through an auth.component and auth.service i return to app.component the status of a user through an observable set in the ngOnInit interface implementation:

ngOnInit() {
    this.isAuthSubscription = this.authService.isAuth$
        .subscribe(
        val => {
            let role;
            role = val
            this.isAuthenticated = false;
            if (role) {
                this.isAuthenticated = true;
                this.isAdmin = false;
                if (role == 'admin'){
                    this.isAdmin = true;
                }
            }
            this.user = this.helpService.getUser();
        });
}

If i work inside the page everything works, but if i refresh the page pressing enter on the url bar of the browser i loose all information about "isAdmin" and "isAuthenticated".

Refreshing fires up a server http get method that i inserted to avoid 404 status response:

jAppRouter.get('/', function (req, res, next) {
    res.render('index');
});

it probably depends that information come across the observable, but how can solve this problem? I basically want to be able to refresh my menu (app.component) from a different component, maybe this is not the right way... Thanks Max

You could use `localStorage` to save this kind of things. Check this [**question**](http://stackoverflow.com/questions/40589730/local-storage-in-angular-2). — developer033, May 21 '17 at 23:16
Yes, as described above, you need to store somewhere to avoid losing state on refresh. LocalStorage works well for this. — Muirik, May 22 '17 at 05:23

score 1 · Answer 1 · answered May 21 '17 at 22:59

1

This would be an expected behavior of any SPA not specific to Angular. When a browser refresh happens the application looses its state and its completely unaware what actions was done before.

answered May 21 '17 at 22:59

Sathish Mani

11
1
2

score 1 · Answer 2 · answered May 25 '17 at 18:20

If it can help someone i share the step i did to make it work (i spent lots of hours around it).

I used my authentication token (already placed into localstorage) to make a server call for checking if a user is administrator or not.

With this information i can always refresh my menu (that is present in the app.component) anywhere.

The problem is to syncronize correctly all operations.

I basically do this operations in two place: when a user login and when the browser is refreshed.

Since i want to keep my app with a valid state and consistent, refreshing is to be managed.

In App.Component:

In ngOnInit i call a custom service function that returns me if a user is an Administrator or not so when i refresh i have this information immediately; second, i insert a subscriber that informs me a user has logged in.

 ngOnInit() {
     this.authService.isAdmin().subscribe(
     ret => {
     this.isAdmin = ret;
    });
  this.isAuthSubscription = this.authService.isAuth$
  .subscribe(
      val => {
      this.isAdmin=this.authService.IsAdministrator();
      this.isAuthenticated = val
     });
 }

This subscriber is to inform that a user is logged in.

A trick i do is to keep a viariable inside my (global) custom service. It's enough to keep it well updated to the correct state that we will have that information easily and fast.

I hope this can help someone...

Angular 2: lost component information after refresh

2 Answers2