Angular 4 路由器:防止浏览器直接导航 [英] Angular 4 router: prevent direct browser navigation

问题描述

如何说服 Angular 4 路由器在我的应用中禁用直接浏览器导航?

How can I convince the Angular 4 router to disable direct browser navigation within my app?

我研究了路由器钩子 CanActivate 和 CanDeactivate 并实现了它们，但是在使用直接浏览器导航时 CanDeactivate 根本不会触发.

I have looked into the router hooks CanActivate and CanDeactivate and implemented them but CanDeactivate does not fire at all when using direct browser navigation.

我可以使用 CanActivate 来阻止 url，但只能在应用程序重新启动后才能使用，这需要时间并在浏览器窗口中进行不需要的更改.

I can use CanActivate to prevent the url but only after the app reboots, which takes time and undesired changes in the browser window.

我希望能够在应用重新启动之前捕捉直接浏览器导航.

I want to be able to catch the direct browser navigation BEFORE the app reboots.

如果这有帮助:我想完全禁止直接浏览器导航，所以我不需要允许某些网址并禁用其他网址的解决方案.

In case this helps: I want to disallow direct browser navigation altogether, so I don't need a solution that allows certain urls and disables others.

这是我的路由器定义:

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 { }

推荐答案

以下解决方案不是基于 Angular 的解决方案.正如 Maximus 在他的回答中所解释的，这是一个浏览器问题，因此解决方案必须基于浏览器.

The following solution is not an Angular based one. As Maximus explained in his answer this is a browser issue and therefor the solution must be browser based.

此解决方案源自此站点上的一个答案 (见这里)我用以下三种方法编写了一个小(打字稿)服务:

This solution is derived from an answer on this site (see here) I have written a little (typescript) service with the following three methods:

  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);
  }

这很好用，但我仍然愿意接受其他解决方案.

This works fine but I'm still open to other solutions.

这篇关于Angular 4 路由器:防止浏览器直接导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！