Angular 4 router: предотвратить прямую навигацию в браузере

Question

Как мне убедить маршрутизатор Angular 4 отключить прямую навигацию по браузеру в моем приложении?

Я посмотрел в крюки маршрутизатора CanActivate а также CanDeactivate и реализовал их, но CanDeactivate вообще не срабатывает при использовании прямой навигации в браузере.

я могу использовать CanActivate чтобы предотвратить URL-адрес, но только после перезагрузки приложения, что требует времени и нежелательных изменений в окне браузера.

Я хочу быть в состоянии поймать прямую навигацию браузера до перезагрузки приложения.

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

Вот мое определение маршрутизатора:

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent, canActivate: [RouteGuardService] },
  { path: 'users', component: UsersMainComponent, canActivate: [RouteGuardService] },
  { path: 'vendors', component: VendorMainComponent, canActivate: [RouteGuardService] },
  { path: 'invoices', component: InvoicesMainComponent, canActivate: [RouteGuardService] },
  { path: 'offers' , component: EsdMainComponent, canActivate: [RouteGuardService] },
  { path: 'settings' , component: SettingsMainComponent, canActivate: [RouteGuardService] },
  // Callback MUST not be route guard protected.
  { path: 'callback' , component: CallbackComponent },
  { path: 'createvendor' , component: CreateVendorsComponent, canActivate: [RouteGuardService] },
  { path: 'customerdashboard' , component: CustomerDashboardComponent, canActivate: [RouteGuardService] },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [RouteGuardService]
})
export class AppRoutingModule { }

Answer 1

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

Это решение получено из ответа на этом сайте ( см. Здесь). Я написал небольшой (машинописный) сервис со следующими тремя методами:

  private preventNavigation(): void {
    const location = window.document.location;
    const originalHashValue = location.hash;

    window.setTimeout(() => {
      location.hash = 'preventNavigation' + (9999 * Math.random());
      location.hash = originalHashValue;
    }, 0);
  }

  public disableBrowserNavigation(): void {
    window.addEventListener('beforeunload', this.preventNavigation, false);
    window.addEventListener('unload', this.preventNavigation, false);
  }

  public enableBrowserNavigation(): void {
    window.removeEventListener('beforeunload', this.preventNavigation);
    window.removeEventListener('unload', this.preventNavigation);
  }

Это прекрасно работает, но я все еще открыт для других решений.

Answer 2

Как мне убедить маршрутизатор Angular 4 отключить прямую навигацию по браузеру в моем приложении?

Angular не может этого сделать, потому что это не то, что контролируется Angular. Когда вы заходите в адресную строку и вводите адрес, а затем нажимаете ввод, браузер загружает новую страницу. Это может быть угловое приложение или любое другое приложение. Это функциональность браузера. Угловые элементы управления навигацией только внутри приложения, когда вы нажимаете на routerLink,

Вы можете попробовать использовать onbeforeunload, но у него есть свои ограничения.