routing redirects always to homepage component after refreshing, how do i stop this happening?

Question

im building an angular app with very basic authguard authorization. in app i also have 2 components that render depending on the user if its logged or not.

problem is, always that i refresh page on some component, routing doesnt stay on that component but redirects to homepage. Ive like to stop this to happen.

app-routing:

const routes: Routes = [
  {
    path: '', 
    pathMatch: 'full',
    redirectTo:'home'
  },
  {
    path: 'home', 
    pathMatch: 'full',
    component: HomePageComponent},
  {
    path: 'experts', 
    component: ExpertsListPageComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'expert-detail', 
    component: ExpertDetailComponent,
    canActivate: [AuthGuard]

  },
  {
    path: 'tags', 
    component: TagsListComponent,
    canActivate: [AuthGuard]

  },
  {
    path: 'new-expert', 
    component: CreateExpertComponent,
    canActivate: [AuthGuard]

  },
  {
    path: 'new-tag', 
    component: CreateTagComponent,
    canActivate: [AuthGuard]

  },
];

app-component:

  <app-home-page (isLoggedIn)=isLoggedIn($event) *ngIf="!logged"></app-home-page>


   <mat-sidenav-container class="main-container"  *ngIf="logged">
    <mat-sidenav  mode="side" opened>
      <span> <img class="logo-img" src="./../assets/svg/logo.svg" alt="logo-img"></span>
      <span> <img class="logo-txt" src="./../assets/svg/experts-logo-text.svg" alt="logo-txt"></span>
      <div class="menu-items">
          <div class="experts-item">
              <span><img src="./../assets/svg/expert-icon.svg" alt="experts-logo" class="experts-logo"></span>
              <span><p routerLink="experts" class="menu-txt">Expertos</p></span>
          </div>
          <div class="tags-item">
            <span><img src="./../assets/svg/tag-icon.svg" alt="tags-logo" class="tags-logo"></span>
            <span><p routerLink="tags" class="menu-txt">Etiquetas</p></span>
          </div>
      </div>
    </mat-sidenav>
    <router-outlet></router-outlet>
  </mat-sidenav-container>

})

authservice:

export class AuthService {

   isLoggedIn = false;

  constructor(private http: HttpClient, private router:Router) { }

  /**
   * Login for our Contact App
   * @param user User that's login in
   * @return Observable<boolean>
   */

  /**
   * Login with real HTTP Request
   * @return Observable<any>
   */
  login(user){
    if(user.mail == "admin" && user.password == "admin"){
      this.setLoggedIn(true);
      sessionStorage.setItem("loggedIn", "true")
    }
  }

  getloggedIn() {
    return this.isLoggedIn;
  }

  setLoggedIn(value: boolean) {
    this.isLoggedIn = value;
  }

any help is very appreciated, thank you in advance! :)

Answer 1

When the page is refreshed, all the data you have in the browser is lost.

One way to create "data persistence" is to use localStorage or sessionStorage. There you store the data and your service consults directly from there. When refreshed, the data will remain in memory.