Vue2/vue3 ルーティング権限管理方法の例

1. Vueルーティングの権限制御には一般的に2つの方法があります

a. ルーティングメタ情報（メタ）
b. メニューとルートを動的にロードする（addRoutes）

2 ルーティング権限を制御するためのルーティングメタ情報（メタ）

2.1 vue2での実装

ウェブサイトに管理者や一般ユーザーなどの異なる役割がある場合、異なるページにアクセスするには異なる役割が必要になります。

この時点で、すべてのページをルーティングテーブルに配置し、アクセスするときにロールの権限を判断するだけで済みます。権限がある場合はアクセスを許可します。権限がない場合はアクセスを拒否し、404 ページに移動します。

vue-router は、ルートを構築するときにメタ構成インターフェースを提供します。メタ情報にルートに対応する権限を追加し、ルートガードで関連する権限をチェックしてルートジャンプを制御できます。

各ルートのメタ属性のロールに、ルートにアクセスできるロールを追加できます。各ユーザーがログインすると、そのユーザーのロールが返されます。次に、ページにアクセスすると、ルートのメタ属性がユーザーのロールと比較されます。ユーザーのロールがルートのロール内にある場合は、アクセスが許可されます。そうでない場合は、アクセスが拒否されます。

Vue2 では次のように実装されています。

'vue-router' から VueRouter をインポートします。
Vue.use(VueRouter)
...
ルート: [
  {
    パス: '/login',
    名前: 'ログイン',
    メタ: {
      役割: ['管理者', 'ユーザー']
    },
    コンポーネント: () => import('../components/Login.vue')
  },
  {
    パス: 'ホーム',
    名前: 'ホーム',
    メタ: {
      役割: ['管理者']
    },
    コンポーネント: () => import('../views/Home.vue')
  },
]

const ルーター = 新しい VueRouter({
  ルート
})

デフォルトルーターをエクスポートする

app.vueファイルに導入し、グローバルルーティングガードを登録します。

//管理者とユーザーの2つの役割があると仮定します 
//バックグラウンドから取得したユーザーロール const role = 'user'
//ページに入ると、ナビゲーションガード router.beforeEach イベントがトリガーされます router.beforeEach((to,from,next)=>{
  to.meta.roles.includes(role) の場合 {
   next() //リリース}esle{
   next({path:"/404"}) //404ページにジャンプ}
})

これからは基本的なルーティング許可制御が完了します

話はそれますが、ルートガードは、ルートが一致しない場合に 404 ページを転送するというビジネス上の要求も解決できます。これは次のように実現できます。

'./router' からルーターをインポートします
router.beforeEach((to, from, next) => {
   // ...
    一致する長さが 0 の場合
        次へ('/404')
    } それ以外 {
        次（）
    }
    //console.log(to、from、next、'ルートガード')
})

2.2 vue3での実装

実際、考え方は似ていますが、Vue3 でのルーティングの使用方法は Vue2 とは少し異なることに注意してください。Vue3 インスタンスを作成するには、よりシンプルな 404 を使用します。Vue3 のルーティング許可制御については、Vue2 と次のコードに従って、次のようにコードを実装できます。

ルートを作成します。

'vue-router' から createRouter、createWebHashHistory をインポートします。
...
ルート: [
  {
    パス: '/login',
    名前: 'ログイン',
    メタ: {
      役割: ['管理者', 'ユーザー']
    },
    コンポーネント: () => import('../components/Login.vue')
  },
  {
    パス: 'ホーム',
    名前: 'ホーム',
    メタ: {
      役割: ['管理者']
    },
    コンポーネント: () => import('../views/Home.vue')
  },
]
const ルーター = createRouter({
    履歴: createWebHashHistory(),
    ルート: ルーター
})
デフォルトルーターをエクスポートします。

ルーティングガード (App.vue にグローバルに登録):

輸入 {
    ルーターを使用する
} 'vue-router' から;
エクスポートデフォルト{
    名前: 'アプリ'、
    設定（） {
        定数ルーター = useRouter();
        router.beforeEach((to, from, next) => {
            // ...
            一致する長さが 0 の場合
                次へ('/404')
            } それ以外 {
                次（）
            }
        })
    }
}

4. メニューとルートを動的に読み込む（addRoutes）

ユーザ権限やユーザ属性に応じてメニューやルーティングテーブルを動的に追加し、ユーザ機能をカスタマイズします。vue-router はルートを動的に登録できる addRoutes() メソッドを提供します。ルートを動的に追加するということは、ルーティングテーブルにルートをプッシュするということに注意する必要があります。ルートは順番にマッチングされるため、404 ページなどのルートは動的に追加したルートの最後尾に配置する必要があります。

5. まとめ

vue2 であっても vue3 であっても、実装のアイデアは実際には似ていますが、インターフェイスの使用方法の詳細は若干異なります。私たちにとって、学習の焦点は特定のフレームワークに置くのではなく、自分自身の思考を訓練することに置く必要があります。

vue2/vue3 ルーティング権限管理に関するこの記事はこれで終わりです。vue ルーティング権限管理に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: