Vueは2つのルーティング許可制御メソッドを実装しています

Vueは2つのルーティング許可制御メソッドを実装しています

ルーティング権限制御は、さまざまなビジネス担当者がアクセスできるページの権限を制限するために、バックグラウンド管理システムでよく使用されます。

許可のないページの場合は、404 ページにジャンプするか、許可がないことを示すプロンプトを表示できます。

方法 1: ルーティング メタ情報 (meta)

すべてのページをルーティング テーブルに配置し、アクセスするときにロールの権限を確認するだけです。
vue-router は、ルートを構築するときにメタ構成インターフェースを提供します。メタ情報にルートに対応する権限を追加し、ルートガードで関連する権限をチェックしてルートジャンプを制御できます。

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

例1: 役割による判断

定数myRouter = 新しいVueRouter({
 ルート: [{
        パス: '/login',
        名前: 'ログイン',
        メタ: {
         役割: ['管理者', 'ユーザー']
        },
        コンポーネント: () => import('@/components/Login')
    },{
        パス: '/home',
        名前: 'ホーム',
        メタ: {
            役割: ['管理者']
        },
        コンポーネント: () => import('@/views/Home')
    },{
     パス: '/404',
     コンポーネント: () => import('@/components/404')
   }]
})

//インターフェースを通じてバックグラウンドから取得したユーザーロールをトークンに格納できると仮定します。const role = 'user'

myRouter.beforeEach((to,from,next)=>{
 to.meta.roles.includes(role) の場合 {
  next() //解放 }else{
  next({path:"/404"}) //404ページにジャンプ}
})

例2: 権限を必要とする識別子をメタに追加する

定数myRouter = 新しいVueRouter({
 ルート: [{
        パス: '/login',
        名前: 'ログイン',
        メタ: {
         タイトル: 「ログインページ」
         アイコン: 「ログイン」
        },
        コンポーネント: () => import('@/components/Login')
    },{
        パス: '/home',
        名前: 'ホーム',
        メタ: {
         タイトル: 「ホーム」
         アイコン: 'ホーム'、
         認証が必要: 有効
        },
        コンポーネント: () => import('@/views/Home')
    },{
     パス: '/404',
     コンポーネント: () => import('@/components/404')
   }]
})

myRouter.beforeEach((to,from,next)=>{
 flag = to.matched.some(record=>record.meta.requireAuth) とします。
 //ここでは、一致したループを使用して、to.meta が直接使用されない理由を見つけます。
 // サブルートがある場合は、まず通常のクリックロジックに従って、第 1 レベルのルートの次に第 2 レベルのルートが実行され、権限の判断が同じでなければならないことを明確にします //to.meta => サブルートのメタを直接検索します。第 1 レベルのルートに requireAuth:true が追加されていない場合は、第 1 レベルのルートページをブロックし、第 2 レベルのルートページに入ることができません。ユーザーが URL アドレスバーを直接改ざんすると、第 2 レベルのページに入ることができ、権限の問題が発生する可能性があります。次に、この権限の下にあるすべてのルートを //to.matched としてマークする必要があります => matched はルート配列であり、サブルートを含むすべてのルートの属性を収集するため、ループ判断と検索方法を通じて、第 1 レベルのルートに権限識別子を追加するだけで、その下にある他のサブルートを承認できます。
 if(フラグ){
  次()
 }それ以外{
  次へ({パス:"/404"})
 }
})

デメリット: 各ルートジャンプを検証するのはコンピューティング リソースの無駄です。また、ユーザーがアクセスできないルートは、理論上はマウントすべきではありません。

方法 2: ルーティング テーブルを動的に生成する (addRoutes)

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

//ストア.js
// vuexに動的に登録する必要があるルートを抽出します。const dynamicRoutes = [
  {
    パス: '/manage',
    名前: '管理'、
    メタ: {
      認証が必要: 有効
    },
    コンポーネント: () => import('./views/Manage')
  },
  {
    パス: '/userCenter',
    名前: 'UserCenter',
    メタ: {
      認証が必要: 有効
    },
    コンポーネント: () => import('./views/UserCenter')
  }
]

ユーザーのカスタマイズされたメニューを保存するには、vuex に userRoutes 配列を追加します。 setUserInfo では、バックエンドから返されたメニューに従ってユーザーのルーティング テーブルが生成されます。

//ストア.js
setUserInfo (状態、ユーザー情報) {
  state.userInfo = ユーザー情報
  state.auth = true // ユーザー情報を取得するときにauthをtrueにします。もちろん、userInfoを直接判断することもできます。
  // ユーザールーティングテーブルを生成する state.userRoutes = dynamicRoutes.filter(route => {
    userInfo.menus.some(menu => menu.name === route.name) を返します
  })
  router.addRoutes(state.userRoutes) // ルートを登録する}

メニューのレンダリングを変更する

// アプリ.vue
<div id="nav">
   <router-link to="/">ホーム</router-link>
   <router-link to="/login">ログイン</router-link>
   <template v-for="(menu, index) of $store.state.userInfo.menus">
     <ルーターリンク:to="{ name: menu.name }":key="index">{{menu.title}}</ルーターリンク>
   </テンプレート>
</div>

Vue のルーティング許可制御を実装する 2 つの方法についての記事はこれで終わりです。Vue のルーティング許可制御に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueルーティング権限制御分析
  • Vueカスタム指示と動的ルーティングによる権限制御の実現
  • Vue ルーティングガードとページログイン権限制御を設定する方法 (2 つの方法)
  • Vue の権限制御 (ルート検証) の 2 つの方法
  • vue-routerルーティングの遅延読み込みと権限制御の詳細な説明

<<:  Docker コンテナのカスタム ホストのネットワーク アクセス操作

>>:  MySQLとRedisキャッシュ間の同期ソリューションについての簡単な説明

推薦する

SQL文でのgroup byの使用について簡単に説明します

1. 概要Group by は、by の後の規則に従ってデータをグループ化することを意味します。いわ...

Nginx/Httpd ロードバランシング Tomcat 設定チュートリアル

前回のブログでは、Nginx と httpd を使用して、逆生成用のバックエンド Tomcat サー...

docker を使用して minio と java sdk を構築するプロセスの詳細な説明

目次1minioはシンプル2 Dockerビルド minio 2.1 単一ノード2.2 マルチノード...

Vue のライフサイクルとフック関数

目次1.ライフサイクルとは何か2. Vueのライフサイクル3. ライフサイクルフック関数1.ライフサ...

docker ストレージを使用して Exit を実行すると、サーバーへのファイルのアップロードが失敗する問題と解決策

1. 問題の説明Docker コンテナにインストールされているストレージが終了状態になっているため、...

表には表示したい境界コードが表示されます

テーブルの共通プロパティ基本的な属性は、width (幅)、height (高さ)、border (...

UbuntuからMySQLを削除して再インストールする方法

まずmysqlを削除します: sudo apt-get remove mysql-*残ったデータをク...

時間のかかるMySQLレコードのSQL例の詳細な説明

mysqlは時間のかかるSQLを記録しますMySQL は、最適化と分析のために、時間のかかる SQL...

JSはリクエストディスパッチャーを実装する

目次抽象化と再利用シリアルセグメントシリアル、セグメントパラレル要約するはじめに: JS は当然並列...

Vue2 キューブUI 時間セレクターの詳細な説明

目次序文1. 需要と効果必要効果2. コードの実装index.vue(html)日付方法テスト結果3...

Angularの親子コンポーネント通信の詳細な説明

目次概要1. 入力および出力プロパティの概要2. 入力属性3. プロパティバインディングは親コンポー...

WeChatアプレットでvantフレームワークを使用するための具体的な手順

目次1. アプレットのプロジェクト ディレクトリを開き、ファイルの場所を開きます。 2. プロジェク...

CN2、GIA、CIA、BGP、IPLC はどういう意味ですか?

CN2ラインとは何ですか? CN2 は、China Telecom Next Carrier Ne...

モバイル端末の水平および垂直画面ビューポート検出を決定するための js のいくつかの方法

目次1. 異なるビューポートを取得する方法2. 水平画面と垂直画面のJavaScript検出3. 水...

Docker ポート マッピングと外部アクセス不可の問題

Docker コンテナはサービスを提供し、ポート 8888 をリッスンします。外部からアクセスできる...