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

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

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

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

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

Vue では通常、

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

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

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

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

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

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

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

/admin

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

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 サイトの他の関連記事を参照してください。