Как перенаправить неизвестные маршруты на домашний маршрут в программе Angular?

Question

У меня есть файл routes.ts, как показано ниже:

import { AuthGuardService as AuthGuard } from '../services/auth-guard.service';

export const routes:Routes = [
    {path : '' , redirectTo : '/home' , pathMatch : 'full'},
    {path: 'home' , component : HomeComponent},
    {path: 'users' , component : UsersComponent, canActivate: [AuthGuard]},

];

И файл auth-guard.service.ts, например, такой:

export class AuthGuardService implements CanActivate {

  constructor(public auth: AuthService, public router: Router) {}
  canActivate(): boolean {
    if (!this.auth.isLoggedIn()) {
      this.router.navigate(['home']);
      return false;
    }
    return true;
  }
}

И он хорошо работает для известных маршрутов, таких как users но когда я пробую неизвестный маршрут, такой как homeee, он не работает должным образом и показывает страницу с верхним и нижним колонтитулами и без содержимого. Как я могу перенаправить все неизвестные маршруты на домашний компонент?

Также мне хотелось бы знать, это хороший способ для того, что я люблю делать или нет? (Мне нравится, что только зарегистрированные пользователи имеют доступ к другим компонентам, кроме домашнего компонента, а также к тому, что все маршруты перед входом в систему будут перенаправлены на домашний компонент).

Answer 1

Расширьте свой существующий массив маршрутов, добавив запасной маршрут:

export const routes:Routes = [
    {path : '' , redirectTo : '/home' , pathMatch : 'full'},
    {path: 'home' , component : HomeComponent},
    {path: 'users' , component : UsersComponent, canActivate: [AuthGuard]},
    {path: '**' , component : HomeComponent},

];

Будьте осторожны, чтобы включить его в конец массива, иначе он перехватит все маршруты.

Answer 2

Документация Angular рекомендует определять маршрутный маршрут .

Добавить групповой маршрут для перехвата недействительных URL-адресов и корректной их обработки. Маршрут подстановочного знака имеет путь, состоящий из двух звездочек. Это соответствует каждому URL. Маршрутизатор выберет этот маршрут, если он не может соответствовать маршруту ранее в конфигурации. Маршрут подстановочного знака может перейти к пользовательскому компоненту «404 Not Found» или перенаправить на существующий

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

В вашем случае:

{ path: '**', redirectTo: 'home'}