Angular 6: Охрана на всех маршрутах не работает

Question

Я пытаюсь обезопасить интерфейс, позволяя только определенному идентификатору получить доступ. Я хочу, чтобы, если кто-то попытается ввести любой маршрут, кроме / login /: id, он получит страницу не найденной, если он еще не вошел в систему, но она не работает. Это мой маршрутный столик и охранник:

EDIT: Я решил проблему и обновил код

приложение-routing.module.ts

// Routing array - set routes to each html page
const appRoutes: Routes = [
  { path: 'login/:id', canActivate: [AuthGuard], children: [] },
  { path: '', canActivate: [AuthGuard], canActivateChild: [AuthGuard], children: [
    { path: '', redirectTo: '/courses', pathMatch: 'full' },
    { path: 'courses', component: CourseListComponent,  pathMatch: 'full'},
    { path: 'courses/:courseId', component: CourseDetailComponent, pathMatch: 'full' },
    { path: 'courses/:courseId/unit/:unitId', component: CoursePlayComponent,
      children: [
        { path: '', component: CourseListComponent },
        { path: 'lesson/:lessonId', component: CourseLessonComponent, data:{ type: 'lesson'} },
        { path: 'quiz/:quizId', component: CourseQuizComponent, data: {type: 'quiz'} }
      ]}
    ]},
  { path: '**', component: PageNotFoundComponent, pathMatch: 'full' }];

auth.guard.ts

     canActivate(route: ActivatedRouteSnapshot, state:
     RouterStateSnapshot): boolean |
     Observable<boolean> | Promise<boolean> {
       // save the id from route snapshot
       const id = +route.params.id;

       // if you try to logging with id
       if (id) {
         this.authUserService.login(id);

         // if there was error - return false
         if (this.authUserService.errorMessage) {
           this.router.navigate(["/page_not_found"]);
           return false;
         }

         // there wasn't any errors - redirectTo courses and
         // continue
         else {
           this.router.navigate(["courses"]);
           return true;
         }
       }

       // if you already logged and just navigate between pages
       else if (this.authUserService.isLoggedIn())
          return true;

       else {
         this.router.navigate(["/page_not_found"]);
         return false;
       }
      }

       canActivateChild(route: ActivatedRouteSnapshot,state:
       RouterStateSnapshot): boolean |
       Observable<boolean> | Promise<boolean> {
          return this.canActivate(route, state);
        }

Auth-user.service.ts

export class AuthUserService implements OnDestroy {

  private user: IUser;
  public errorMessage: string;
  isLoginSubject = new BehaviorSubject<boolean>(this.hasToken());

  constructor(private userService: UserService) { }

  // store the session and call http get
  login(id: number) {
    this.userService.getUser(id).subscribe(
      user => {
        this.user = user;
        localStorage.setItem('user', JSON.stringify(this.user));

        localStorage.setItem('token', 'JWT');
        this.isLoginSubject.next(true);
      },
      error  => this.errorMessage = <any>error
    );
  }

   // if we have token the user is loggedIn
   // @returns {boolean}
  private hasToken() : boolean {
    return !!localStorage.getItem('token');
  }

  // @returns {Observable<T>}
  isLoggedIn() : Observable<boolean> {
   return this.isLoginSubject.asObservable();
  }

  // clear sessions when closing the window
  logout() {
    localStorage.removeItem('user');
    localStorage.removeItem('token');
    this.isLoginSubject.next(false);
  }

  ngOnDestroy() {
    this.logout();
  }

Answer 1

Так что мне удалось решить эту проблему. Я добавил к маршруту логин /: id children: [] и изменил isLoggedIn на поведениеSubject, чтобы токен не менялся после обновления или перемещения между страницами, и он работал. Я обновил код в посте, чтобы все могли видеть решение

Answer 2

изменить эту строку:

const id = route.params.id;

до

const id = +route.params.id; // to convert from string to number (it's string from route params)

и еще одна вещь, я не уверен, что вы должны перейти на страницу, не найденную, как вы сделали ['**']

вместо этого сделайте это: ['/ page_not_found']

теперь я знаю, что «page_not_found» не существует в вашем маршруте, но в этом суть, из-за этого пользователь будет перенаправлен на страницу, не найденную, как вы хотели