vue-router権限制御-簡単な方法

原文住所:http://blog.kantli.com/article/42
2018-12-21更新:この方法は実際に後遺症がある.サブページF 5が強制的にリフレッシュされると、入力されたユーザ権限がクリアされ、ユーザ権限が不足して404ページに導かれる.解決策は,リフレッシュ前後のフック関数に権限データをlocalStorageに保存して読み込むことであり,優雅ではないが簡単である.もちろん、強制リフレッシュはもともとvueの予想される動作ではなく、データを更新して自動的にコンポーネントを更新し、F 5は何をしますか?だから、この問題を処理しないこともできます.特に内部ユーザーに対して、私たちが顔を出さないとき--!!
vue-routerでフロントエンド権限を制御するのは一般的な要件です.

には、バックエンドで直接判断を完了し、ページリストと操作リストを提供し、フロントエンドでレンダリングする方法があるが、このスキームは優雅ではなく、前後のエンド結合度が高い.

の一般的な方法は、ログインページをrouterの外に独立させ、権限制御ファイルを専門に書き、ログイン後にユーザー権限に基づいてrouterをロードし、その後、権限をパラメータとして様々なコンポーネントに転送し、要素のレンダリングを制御することです.この方法は合理的で、追加のオーバーヘッドはありませんが、ログインページと権限制御ファイルを独立して書く必要があるのは面倒です.特に、いくつかの小さなプロジェクトでは.

私たちはもっと簡単な方法があることを望んでいます.この時、ニーズを整理して、私たちの主な目標は:

メニューバー制御は、アクセス可能なページメニューを権限に基づいてレンダリングする.

操作ボタン権限制御、操作権限のないものは表示しない.

リンクを直接クリックしたり、アドレスを入力したりして権限のないページに入る人がいる場合は、ブロックします.

第1、第2の目標は容易に実現でき、権限リストを対応するコンポーネントに転送し、v-ifで判断すればよく、越権ページのブロック問題を解決する必要がある.上記の一般的な方法では、ブロックを実現するために、単独でログインページを書き、ログイン後に権限に基づいてルーティングをロードすることで、権限のないルーティングはまったくロードされず、404ページに導かれる.
では、今の問題は、どうすればもっと簡単な方法があるのかということです.
明らかに、loginページを単独で書きたくない場合は、routerはログイン前にロードを完了します.routerを介して404ページを自動的にガイドできない場合は、手動で起動するしかありません.考えがはっきりしていれば、実現するのにプレッシャーはありません.

vueコンポーネントのライフサイクルに基づいてmountedフック上で権限判断を行い、propsを介して送信されたユーザ権限リストに対応する権限がなければ404:

にページをジャンプすることができます.

mounted () {
         if (!this.check_user_privilege (current_page)) {
             this.$Message.error('    ');
             this.$router.push('404');
         }
 }

もちろん、実際にはvue-routerもページジャンプ時のフックメソッドを提供しています.グローバルにはbeforeEach、afterEachなどがあります.私たちは直接コンポーネント内で使用したい場合は、beforeRouteEnterメソッドを使用して、ページに入るときに判断することができます.例えば:

beforeRouteEnter (to, from, next) {
         next(vm => {
             if (!vm.check_user_privilege (current_page)) {
                 vm.$Message.error('    ');
                 vm.$router.push('404');
             }
         })
     },

具体的には[ドキュメント]を参照してください.
もちろん、この例では、vue-routerで提供されるフックは、直接mountedで判断条件を書くほうがいいです.beforeRouteEnterメソッドのnextはコンポーネントパラメータを呼び出す必要があり、mountedが実行されてから実行されるので、mountedフックにページデータをロードする必要があります.無駄を避けるために、先に判断したほうがいいです.
一般的な方法と比較して、単純な方法は追加のオーバーヘッドがあり、主にルートを完全にロードする必要があると同時に、ページをロードした後に判断した.しかし、コードを書く観点から言えば、論理的にはもっと節約されているようです.権限制御を集中的に行うファイルを別途書く必要はありません.ページごとの権限判断については、もともとメニューバーでしなければならないことで、異なるページに広がっても負担ではありません.
何か副作用があるのではないでしょうか.しばらくはそうではないようですが、mountedの最初からページ権限判断をすれば、越権データをロードする問題もなく、しかもデータ権限はバックエンドが単独で判断する必要があるので、フロントエンドに心配させるべきではありません.