Force NavigationNodes to refresh after Login

user_14333591 0
Viewed 135

When no user is logged in my navigation nodes are different than when the user is logged in. When I perform the login, my navigation nodes only update after I refresh the page (F5). Is there a way to force the navigation nodes to rebuild/update?

spartacus-storefront
2 Answers

That's because of the NgRx store caching the "Navigation nodes" loaded before the login. The F5 here is loading the whole application including the whole NgRx state.

What you need to do is to create a global MetaReducer that clears the Navigation node cache "cms.navigation" when an Action login or logout is emitted. you can do this using a global meta reducer https://ngrx.io/guide/store/metareducers

you can add a class with something like this to solve this issue:

 function clearNavigationState(action: Action, state) {
          if (
            action.type === AuthActions.LOGIN ||
            action.type === AuthActions.LOGOUT
          ) {
            return { ...state, //logic to clear the navigation state };
          } else {
            return state;
          }
        }
        
        export function metaReducerFactory(): MetaReducer<any> {
          return (reducer: ActionReducer<any>) => (state, action) => {
            const newState = clearNavigationState(action, state);
            return reducer(newState, action);
          };
        }
        
        @NgModule({
          providers: [
            {
              provide: META_REDUCERS,
              deps: [],
              useFactory: metaReducerFactory,
              multi: true,
            },
          ],
        })
user_7400120

Temporary workaround:

ngOnInit(): void {
this.router.events.subscribe((event: Event) => {
  if (
    event instanceof NavigationStart &&
    this.winRef.nativeWindow.location.href.includes('login')
  ) {
    this.node$ = this.service.getNavigationNode(this.componentData.data$);
  }
});

}

user_143335910
Related