Angular маршрутизация перенаправления на дом при refre sh другая страница

Question

В моем приложении после входа в систему у меня есть домашняя страница и некоторые другие страницы. Проблема в том, что когда я нахожусь внутри на одной из этих других страниц, и я обновляю sh страницу, она снова отправляет меня домой. Это мой Routes:

const routes: Routes = [
  {
    path: '', redirectTo: '/home', pathMatch: 'full'
  },
  {
    path: 'login',  component: LoginComponent 
  },{
    path: 'list',  component: ListComponent, canActivate : [AuthGuardService]
  },{
    path: 'home', component: HomeComponent, canActivate : [AuthGuardService]
  },{
    path: 'detail/:id',  component: HomeComponent, canActivate : [AuthGuardService],
  },{
    path: '**', redirectTo: 'login' ,pathMatch: 'full'
  }
];

компонент приложения имеет выход маршрутизатора

<div [ngClass]="{'container': (isLoggedIn$ | async), 'mt-2': (isLoggedIn$ | async)}" class="h-100">
    <router-outlet></router-outlet>
</div>

Итак, чего я ожидаю? Прежде всего, если я страница списка (localhost:4200/list) и я обновлю sh эту страницу, она должна остаться там. На этой странице. Но теперь он перенаправляет меня на localhost:4200/home. Конечно, когда я нажимаю на элемент списка, он должен отправить меня на localhost:4200/detail/itemId, но он всегда отправляет меня домой. Спасибо

Редактировать с помощью AuthGuardService:

export class AuthGuardService implements CanActivate {
  constructor(private route : Router, private store: Store<AppState>) {}

  canActivate() {
    return this.store
      .pipe(
          select(isLoggedIn),
          tap(loggedIn => {
              if (!loggedIn) {
                this.route.navigate(['login']);
              }
          })
      )  
  }
}

Я добавляю эффект входа в систему

login$ = createEffect(() =>
        this.actions$
            .pipe(
                ofType(userActions.login),
                tap(action => {
                    localStorage.setItem('userInfo',
                    JSON.stringify(action.user))
                    this.router.navigate(['home']);
                })
            )
    ,{dispatch: false});

РЕШЕНИЕ:

Ну, после нескольких часов отладки я нашел решение. в основном я удалил this.router.navigate (['home']); в AuthGuardService, и я включил его в функцию входа компонента, как только пользователь вошел в систему. Поставьте this.router.navigate (['home']); в AuthGuardService увольняет охранника каждый раз, когда я обновляю sh страницу, и поэтому каждый раз, когда он перенаправляет меня к себе домой. Вот и все. Спасибо

Answer 1

Порядок маршрутов важен, поскольку при сопоставлении маршрутов Маршрутизатор использует стратегию выигрыша с первым совпадением, поэтому более точные c маршруты следует размещать над менее определенными c маршрутами.

• Список маршрутов с указанием c сначала пути
• После чего следует пустой маршрут, который соответствует маршруту по умолчанию.
• Маршрут с подстановочными знаками стоит последним, поскольку он соответствует каждому URL.

Маршрутизатор выбирает его, только если другие маршруты не соответствуют первому.

Ссылка: https://angular.io/guide/router#route -заказ

Таким образом, вы меняете порядок следующим образом

const routes: Routes = [
  {
    path: 'login',  component: LoginComponent 
  },{
    path: 'list',  component: ListComponent, canActivate : [AuthGuardService]
  },{
    path: 'home', component: HomeComponent, canActivate : [AuthGuardService]
  },{
    path: 'detail/:id',  component: HomeComponent, canActivate :  [AuthGuardService],
  }
  {
    path: '', redirectTo: '/home', pathMatch: 'full'
  },
  ,{
    path: '**', redirectTo: 'login' ,pathMatch: 'full'
  }
];