Web フロントエンド ----[Vue] vue ルーティングガード (グローバルフロントルーティングガード、グローバルポストルーティングガード、ローカルルーティングパスガード、ローカルルーティングコンポーネントガード)

序文

この記事では、Vue2 の最後の知識ポイント、Vue のルーティングガードについて紹介します。つまり、認証です。すべてのコンポーネントに誰でもアクセスできるわけではなく、アクセス許可が必要です。アクセス許可に基づいてルーティングコンポーネントを表示するには、ルーティングガードが必要です。

(この記事は前回の記事のコードをベースにしています)

グローバルフロントルートガード

グローバルフロントルーティングガードは、作成されたルーターと公開されたルーターの間に書き込まれます。

router.beforeEach(コールバック)

コールバック関数には、通常の関数またはアロー関数を使用できます。

コールバック関数には 3 つのパラメータがあります

from : ルーティングオブジェクト、どこから来たのか、開始点を示します

to : 行き先と終点を示すルーティングオブジェクト

next : これは関数であり、呼び出した後は解放を意味し、そのまま下に降りることができます。

router.beforeEach((to,from,next)=>{})

このコールバック関数は、初期化中に1 回呼び出され、ルーティングコンポーネントを切り替える前に毎回呼び出されます。

簡単な例
router.beforeEach((to,from,next)=>{
    let user = 'zzz'
    if(to.meta.isAuth) {
        if(user=='admin') {
            next()
        }
        else {
            alert('你没有权限')
        }
    }
    else {
        next()
    }
})
ルーティング対象は認証が必要かどうかを頻繁に判断する必要があるためです。

したがって、コードの冗長性はルーティングオブジェクトにカスタム属性を追加することで解決できます。

ルーティングオブジェクトにカスタム属性を追加するには、ルーティングオブジェクトのメタで定義する必要があります。

上記のコードにより、認証機能を簡単に実現し、ユーザー名を判断し、表示ルーティングコンポーネントを解放するかどうかを決定できます。

グローバルポストルートガード

グローバルポストルートガードはグローバルプレルートガードと同じであり、どちらもルーターの作成とルーターの公開の間に書き込まれます。

router.afterEach((to,from)=>{})

to と from の 2 つのパラメータは、グローバルフロントガードと同じです。

違いは、

グローバルフロントルートガードは初期化中にコールバックを 1 回呼び出し、コールバック関数はルーティングコンポーネントを切り替える前に1 回呼び出されます。

グローバルポストルーティングガードは、初期化中に 1 回、ルーティングコンポーネントの切り替え後に1 回、コールバックを呼び出します。
// 全局后置守卫
router.afterEach((to,from)=>{
    console.log(to);
    console.log(from);
})

ローカルルートガードのパスガード

ローカルルートガード、個々のコンポーネントの認証

コードはルートルーティングオブジェクトに記述されます

beforeEnter(){}

コールバック関数はありません

関数として理解できる

3 つのパラメータ

へ、から、次へ
 beforeEnter(to,from,next){
                        let user = 'admin'
                        if(user=='admin') {
                            next()
                        }
                        else {
                            alert('你没有权限')
                        }
                    }

部分配線ガードコンポーネントガード

コンポーネントガードはルーティングコンポーネント用であり、ルーティングコンポーネントにのみ有効です。

コードはルーティングコンポーネントに記述されます

ルーティングコンポーネントに入る前に実行します。

beforeRouteEnter(to,from,next){}

ルーティングコンポーネントを離れる前に実行します。

beforeRouteLeave(to,from,next){}
 beforeRouteEnter(to,from,next){
      console.log(to);
      next()
    },
    beforeRouteLeave(to,from,next){
      console.log(from);
      next()
    }
タイムライン上で実行する

beforeRouteEnter の to と beforeRouteLeave の from はオブジェクトを指します

序文

グローバルフロントルートガード

グローバルポストルートガード

ローカルルートガードのパスガード

部分配線ガード コンポーネントガード

おすすめ

部分配線ガードコンポーネントガード