web-dev-qa-db-ja.com

Angular 4ルーター：ブラウザの直接ナビゲーションを防止する

Angular 4ルーターにアプリ内の直接ブラウザーナビゲーションを無効にするように説得するにはどうすればよいですか？

ルーターフックCanActivateとCanDeactivateを調べて実装しましたが、ブラウザーの直接ナビゲーションを使用するとCanDeactivateはまったく起動しません。

CanActivateを使用してURLを防ぐことができますが、アプリの再起動後にのみ使用できます。これには時間がかかり、ブラウザーウィンドウで望ましくない変更が行われます。

アプリが再起動する前に、ブラウザの直接ナビゲーションをキャッチできるようにしたい。

これが役立つ場合：ブラウザの直接ナビゲーションを完全に禁止したいので、特定の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 { }
angularangular-routingangular4-router
7
hholtij

次のソリューションはAngularベースのソリューションではありません。Maximusが彼の回答で説明したように、これはブラウザの問題であるため、ソリューションはブラウザベースである必要があります。

このソリューションは、このサイトの回答から派生しています（ ここを参照 ）私は次の3つの方法で小さな（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);
  }

これは問題なく動作しますが、私はまだ他の解決策を受け入れています。

7
hholtij

Angular 4ルーターにアプリ内の直接ブラウザーナビゲーションを無効にするように説得するにはどうすればよいですか？

それはAngularによって制御されるものではないため、Angularはそれを行うことができません。アドレスバーに移動してアドレスを入力し、Enterキーを押すと、ブラウザに新しいページが読み込まれます。 Angularアプリケーションでも、他のアプリケーションでもかまいません。ブラウザの機能です。Angularナビゲーションのみを制御します内部routerLinkをクリックしたときのアプリ。

onbeforeunload を使用してみることができますが、制限があります。

3
Maxim Koretskyi