Vue-Router: ルート ガードを使用してルートを保護するにはどうすればよいですか?

Vue-Router: ルート ガードを使用してルートを保護するにはどうすればよいですか?

Vue.js 開発において、Vue-Router はフロントエンドのルーティング管理のための重要なツールです。 Vue-Router は、ページ ジャンプや遷移効果を簡単に実装できることに加えて、ルート ジャンプの前後に認証やリダイレクトなどのカスタム操作を実行できるルート ガード メカニズムも提供します。

ルーティング ガードの使用法をよりよく理解するために、グローバル ガード、ルート排他的ガード、コンポーネント内ガードの 3 つのパートに分けてルーティング ガードを紹介します。

1. グローバル ガード

グローバル ガードは、アプリケーション全体でルート ジャンプの前後に実行されるガードで、Vue が提供するメソッドで登録できます。 -ルーター。 beforeEach、beforeResolve、afterEach という 3 つのグローバル ガード メソッドがあります。

main.js ファイルでは、次のコードを使用して登録できます。

import router from './router'

router.beforeEach((to, from, next) => {
  // 这里是你的自定义逻辑
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login') // 重定向到登录页
  } else {
    next()
  }
})

router.beforeResolve((to, from, next) => {
  // 这里是你的自定义逻辑
  next()
})

router.afterEach(() => {
  // 这里是你的自定义逻辑
})

beforeEach メソッドでは、実際の状況に基づいて認証の判断を行うことができます。ユーザーがログインしておらず、ターゲット ルートにログイン権限が必要な場合は、next('/login') を通じてユーザーをログイン ページにリダイレクトできます。

beforeResolveこのメソッドはルートが解決された後に呼び出され、いくつかの非同期操作をこのメソッドで実行できます。

afterEach メソッドは、配線ジャンプの完了後に呼び出され、一部のグローバル クリーンアップ操作を実行するために使用できます。

2. ルート排他的ガード

ルート排他的ガードは特定のルートに対して設定され、そのルートでのみ有効になります。ルーティング設定の beforeEnter 属性を使用して登録できます。

{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    // 这里是你的自定义逻辑
    if (!isAdmin()) {
      next('/access-denied') // 重定向到访问拒绝页
    } else {
      next()
    }
  }
}

ルーティング排他ガードでは、ユーザーに管理者権限があるかどうかを確認し、管理者権限がない場合はアクセス拒否ページにリダイレクトするなど、実際のニーズに基づいて論理的に判断できます。

3. コンポーネント内ガード

グローバル ガードとルート専用ガードに加えて、Vue-Router はコンポーネント内でホップをルーティングするためのコンポーネント内ガードも提供します。手術。コンポーネント内のガードには、beforeRouteEnter、beforeRouteUpdate、および beforeRouteLeave が含まれます。

export default {
  beforeRouteEnter (to, from, next) {
    // 这里是你的自定义逻辑
    if (!isAuthenticated()) {
      next('/login') // 重定向到登录页
    } else {
      next()
    }
  },
  beforeRouteUpdate (to, from, next) {
    // 这里是你的自定义逻辑
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 这里是你的自定义逻辑
    next()
  }
}

コンポーネント内のガードでは、ユーザーがログインしているかどうかを確認し、ログインしていない場合はログイン ページにリダイレクトするなど、実際のニーズに応じていくつかのカスタム操作を実行できます。

概要:

上記の 3 つの方法を通じて、ルート ガードを使用してルートを保護し、認証やリダイレクトなどのカスタマイズされた操作を実装できます。ニーズに応じて、構成に適切なガード タイプを選択して、より柔軟で保守可能なルーティング管理を実現できます。実際の開発では、特定のニーズやビジネス シナリオに応じてこれらのガードを合理的に使用して、アプリケーションのセキュリティとユーザー エクスペリエンスを向上させることができます。

以上がVue-Router: ルート ガードを使用してルートを保護するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。