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

【问题标题】：routing redirects always to homepage component after refreshing, how do i stop this happening?刷新后路由总是重定向到主页组件，我该如何阻止这种情况发生？
【发布时间】：2021-04-19 22:10:12
【问题描述】：

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

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

应用路由：

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

任何帮助都非常感谢，提前谢谢你！ :)

【问题讨论】：

标签： angular authentication routes auth-guard

【解决方案1】：

当页面刷新时，你在浏览器中的所有数据都会丢失。

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

【讨论】：