Geek Answers Handbook

Angular 4 routers: prevent direct browser navigation

How can I convince the Angular 4 router to disable direct browser navigation in my application?

I looked at the hooks of the router CanActivateand CanDeactivateimplemented them, but it CanDeactivatedoes not start at all when using direct browser navigation.

I can use CanActivateto prevent the URL, but only after restarting the application, which takes time and unwanted changes in the browser window.

I want to catch direct browser navigation before the application restarts.

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

Here is my router definition:

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 { }
+6
2

Angular. , , .

(. ). (typescript) :

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

, .

+4

Angular 4 ?

Angular , - Angular. , , . Angular . . Angular , routerLink.

onbeforeunload, .

+2

More articles:


All Articles