【Vue.js】ルーティングの動的管理｜meta情報で権限制御・タイトル変更を柔軟に

Vue.jsのルーティングは、vue-routerを用いて柔軟に管理できます。特に、ルートに付随するmeta情報を活用すれば、ユーザー権限によるアクセス制御やページタイトルの動的変更など、高度な振る舞いを実現できます。

meta情報とは？

vue-routerでは、各ルートに対して任意のmeta情報を定義できます。これは認証要件や画面タイトルなど、ルーティングロジック以外の補足情報を持たせるために使用されます。

const routes = [
  {
    path: '/admin',
    component: AdminPage,
    meta: {
      requiresAuth: true,
      role: 'admin',
      title: '管理者ページ'
    }
  },
  {
    path: '/public',
    component: PublicPage,
    meta: {
      title: '公開ページ'
    }
  }
];

権限制御の実装例

meta.requiresAuth や meta.role を用いることで、ログイン状態や権限に応じたアクセス制限をかけられます。

router.beforeEach((to, from, next) => {
  const isLoggedIn = store.getters['auth/isAuthenticated'];
  const userRole = store.getters['auth/role'];

  if (to.meta.requiresAuth && !isLoggedIn) {
    next({ path: '/login' });
  } else if (to.meta.role && to.meta.role !== userRole) {
    next({ path: '/forbidden' });
  } else {
    next();
  }
});

この処理により、未ログイン時にはログインページへ、権限不足の場合は403ページへリダイレクトするようになります。

タイトルの動的変更

ルーティング後にmeta.titleを参照してdocument.titleを更新することで、ブラウザタブのタイトルを自動で変更できます。

router.afterEach((to) => {
  const defaultTitle = 'My App';
  document.title = to.meta.title || defaultTitle;
});

SEOやユーザー体験を考慮すると、適切なタイトルを動的に設定することは重要です。

meta情報を活かしたその他の用途

metaは以下のような制御にも利用できます。

• ナビゲーション表示の有無（meta.showInMenu）
• ページ読み込み時のローディング演出制御
• アナリティクスイベントの発火

まとめ

vue-routerのmeta情報を活用することで、ルーティングに関する柔軟な拡張が可能になります。認証・認可、タイトル変更、UIの制御など、さまざまな処理をmetaベースで一元化できるため、コードの可読性と再利用性も向上します。

中規模以上のアプリケーションでは、metaの設計方針を明確に定めておくと、後々の保守性に大きく寄与します。