刷新后路由总是重定向到主页组件，我该如何阻止这种情况发生？

问题描述

我正在构建一个具有非常基本的 authguard 授权的 angular 应用程序。在应用程序中，我还有 2 个组件，它们根据用户是否登录而呈现。

问题是，我总是在某个组件上刷新页面，路由不会停留在该组件上，而是重定向到主页。我想阻止这种情况发生。

应用路由：

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

  },{
    path: 'tags',component: TagsListComponent,{
    path: 'new-expert',component: CreateExpertComponent,{
    path: 'new-tag',component: CreateTagComponent,];

应用组件：

  <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>

})

身份验证服务：

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;
  }

非常感谢您的帮助，在此先感谢您！ :)

解决方法

页面刷新后，浏览器中的所有数据都会丢失。

创建“数据持久性”的一种方法是使用 localStorage 或 sessionStorage。您在那里存储数据，您的服务直接从那里进行咨询。刷新后，数据将保留在内存中。