ルーティング権限制御は、さまざまなビジネス担当者がアクセスできるページの権限を制限するために、バックグラウンド管理システムでよく使用されます。 許可のないページの場合は、404 ページにジャンプするか、許可がないことを示すプロンプトを表示できます。 方法 1: ルーティング メタ情報 (meta)すべてのページをルーティング テーブルに配置し、アクセスするときにロールの権限を確認するだけです。 メタ属性で、このルートにアクセスできるロールを 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)ユーザー権限やユーザー属性に基づいてメニューやルーティング テーブルを動的に追加することで、ユーザー機能をカスタマイズできます。 //ストア.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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Docker コンテナのカスタム ホストのネットワーク アクセス操作
>>: MySQLとRedisキャッシュ間の同期ソリューションについての簡単な説明
1. 概要Group by は、by の後の規則に従ってデータをグループ化することを意味します。いわ...
前回のブログでは、Nginx と httpd を使用して、逆生成用のバックエンド Tomcat サー...
目次1minioはシンプル2 Dockerビルド minio 2.1 単一ノード2.2 マルチノード...
目次1.ライフサイクルとは何か2. Vueのライフサイクル3. ライフサイクルフック関数1.ライフサ...
1. 問題の説明Docker コンテナにインストールされているストレージが終了状態になっているため、...
テーブルの共通プロパティ基本的な属性は、width (幅)、height (高さ)、border (...
まずmysqlを削除します: sudo apt-get remove mysql-*残ったデータをク...
mysqlは時間のかかるSQLを記録しますMySQL は、最適化と分析のために、時間のかかる SQL...
目次抽象化と再利用シリアルセグメントシリアル、セグメントパラレル要約するはじめに: JS は当然並列...
目次序文1. 需要と効果必要効果2. コードの実装index.vue(html)日付方法テスト結果3...
目次概要1. 入力および出力プロパティの概要2. 入力属性3. プロパティバインディングは親コンポー...
目次1. アプレットのプロジェクト ディレクトリを開き、ファイルの場所を開きます。 2. プロジェク...
CN2ラインとは何ですか? CN2 は、China Telecom Next Carrier Ne...
目次1. 異なるビューポートを取得する方法2. 水平画面と垂直画面のJavaScript検出3. 水...
Docker コンテナはサービスを提供し、ポート 8888 をリッスンします。外部からアクセスできる...