В Angular 7, как избежать перезагрузки страницы проекта внутри страницы профиля, перейти на страницу входа?

Question

Когда я захожу на панель управления и обновляю страницу, перенаправленную на страницу входа, потому что я добавил защиту маршрутизатора.Я хочу избежать перенаправления внутри страницы этой панели.Есть ли способ сделать это?

Это структура моей защиты роутера

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.isLoggedIn.pipe(
      take(1),
      map((isLoggedIn: boolean) => {
        if (!isLoggedIn) {
          this.router.navigate(['/userlogin']);
          return false;
        }
        return true;
      })
    );
  }

Мой роутинг выглядит следующим образом.

const routes: Routes = [
  { path: '' , component : AdminComponent,
    canActivate: [AuthGuard],
     }
  {path: 'userlogin' , component: UserloginComponent},

  { path: 'admin' , 
    component : AdminComponent,
    canActivate: [AuthGuard],
     }]

Answer 1

Когда вы входите в систему, вам нужно сохранить токен пользователя в localStorage и сохранить эту информацию для вашей охраны, поэтому при каждом обращении к бэкэнду вы отправляете токен jwt из localStorage. Происходит следующее: если вы не скажете своему охраннику, что вы вошли в систему, их isLoggedIn будет ложным и перенаправит вас. Поместите это в свой конструктор охраны:

this.localStorage.observe('session')
            .subscribe(loggedIn => Object.assign(this._loggedIn, loggedIn || {}));

И когда вы входите в систему, введите:

this.localStorage.store('session', this._loggedIn);

localStorage - это личная переменная из LocalStorageService (ngx-webstorage), вы можете использовать все, что захотите.