vue によるルーティング許可制御の実装方法の詳細な説明

Vue は現在最も人気のあるフロントエンド フレームワークの 1 つで、従来のページ レンダリング方法と比較して、フロントエンド ルーティングの管理に重点を置いています。実際のプロジェクトでは、フロントエンドルーティングのアクセス権限も非常に重要な問題となります。では、Vue でルーティング許可制御を実装するにはどうすればよいでしょうか?

Vue では、ルーティング アクセス許可制御を実装する主な方法が 2 つあります: 1 つはフロントエンドで制御する方法、つまり、さまざまなユーザーのアクセス許可に従ってルーティング テーブルを動的に生成する方法、もう 1 つは、ルーティング アクセス許可制御をフロントエンドで制御する方法です。バックエンド インターフェイスが制御されます。つまり、フロントエンドがバックエンドへのリクエストを開始し、返された許可情報に基づいて対応するルーティング テーブルを生成します。

1. フロントエンド制御方法

フロントエンド制御方法では、次の手順でルーティング許可制御を実装できます。ルーティング設定 ファイルでの設定

Vue では通常、

router

フォルダーの下に index.js ファイルを作成し、その中にさまざまなルーティング情報を設定します。ルーティング許可制御を行う場合、このファイルにルーティングのmeta情報を設定し、ルーティング許可情報を格納することができます。 たとえば、ユーザー権限に基づいてアクセスを制御する必要があるルートを定義できます。

{
  path: '/admin',
  name: 'admin',
  component: () => import('@/views/Admin.vue'),
  meta: { requiresAuth: true }
},

このルーティング設定では、

requiresAuth

## という名前のルートを定義します。 #meta属性。これを制御権限が必要なルートとしてマークするために使用されます。 1.2 ルーティング インターセプタの制御

インターセプタは実際には、リクエストをインターセプトし、特定の特定の状況下で指定された操作を実行するために使用されるコードの一部です。 Vue では、

beforeEach

メソッドを使用してルーティング リクエストをインターセプトし、権限制御を実行できます。

たとえば、次のように beforeEach

メソッドを定義できます。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isLoggedIn) {
      next({ path: '/login' });
    } else {
      next();
    }
  } else {
    next();
  }
});

このインターセプターでは、現在アクセスする必要があるルートと、以前に定義された meta 属性を使用して、権限制御が必要かどうかを決定します。当社は、必要に応じてユーザーのログイン状況等に基づいてアクセス制御を行い、必要に応じて指定されたページにジャンプします。

バックエンド制御メソッド

2. バックエンド制御メソッドでは、バックエンドにリクエストを送信して返されたユーザー権限情報を取得し、ルーティング テーブルを生成する必要があります。必要に応じて適切な制御を行ってください。

たとえば、JWT ベースのバックエンドが

/admin

を返す場合、このルートにアクセスするには管理者権限が必要です。ユーザーの権限情報は次のように取得できます:

const response = await axios.get('/user');
const permissions = response.data.permissions;

ユーザーの権限情報を取得した後、Vue Router の動的ルート生成機能やその他の機能を使用して、ルーティング テーブルを動的に生成できます。 たとえば、次のようなルーティング テーブルを動的に生成する関数を定義できます:

function generateRoutesFromMenu (menu = [], permissions = {}) {
  const routes = []

  for (let i = 0, l = menu.length; i < l; i++) {
    const item = menu[i]
    const route = {
      path: item.path,
      name: item.name,
      meta: item.meta, // 从菜单项中提取出路由的meta信息
      component: item.component ? loadView(item.component) : null,
      children: item.children ? generateRoutesFromMenu(item.children, permissions) : []
    }

    // 如果路由需要控制权限
    if (route.meta && route.meta.requiresAuth) {
      // 判断用户是否有权限访问该路由
      if (permissions[route.meta.permissionKey]) {
        // 用户有权限，则把该路由加入到路由表中
        routes.push(route)
      }
    } else {
      // 如果不需要权限控制，则直接加入到路由表中
      routes.push(route)
    }
  }

  return routes
}

この関数では、メニューで

meta## を定義していることがわかります。 item #どのルートに権限制御が必要かをマークする属性。ルーティング テーブルを生成する際、ユーザーの権限情報に基づいて、これらのルートをルーティング テーブルに追加する必要があるかどうかを判断します。権限制御が必要ない場合は、ルーティング テーブルに直接追加できます。

要約すると、Vue でルーティング権限制御を実装するには主に 2 つの方法があります: 1 つはフロントエンドで制御する、つまり、さまざまなユーザー権限に従ってルーティング テーブルを動的に生成する方法、もう 1 つはuse バックエンド インターフェイス制御、つまりフロントエンドがバックエンドへのリクエストを開始し、返された許可情報に基づいて対応するルーティング テーブルを生成します。実際の開発では、プロジェクトの特定の状況に基づいて、適切な方法を選択してルーティング許可制御を実装できます。

以上がvue によるルーティング許可制御の実装方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。