1 つの記事で Vue ミドルウェア パイプラインを学ぶ

vue は vue-middleware-pipeline を作成します

npm i vue-router vuex

<テンプレート>
  <div>
    <p>これはログインコンポーネントです</p>
  </div>
</テンプレート>

<テンプレート>
  <div>
    <p>これは認証されたユーザー用のダッシュボード コンポーネントです</p>
    <ルータービュー/>
  </div>
</テンプレート>

<テンプレート>
  <div>
    <p>これは、認証され登録されたユーザー向けの映画コンポーネントです</p>
  </div>
</テンプレート>

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします

Vue.use(Vuex)

デフォルトの新しいVuex.Storeをエクスポートします({
    州： {
        ユーザー: {
            ログイン: false、
            購読済み: false
        }
    },
    ゲッター: {
        認証(状態) {
            state.user を返す
        }
    }
})

'vue' から Vue をインポートします
'vue-router' から Router をインポートします。
'../store' からストアをインポートします

'../components/Login' からログインをインポートします
'../components/Dashboard' からダッシュボードをインポートします
'../components/Movies' から Movies をインポートします


Vue.use(ルーター)

const router = 新しいルーター({
    モード: '履歴'、
    ベース: process.env.BASE_URL、
    ルート: [
        {
            パス: '/login',
            名前: 'ログイン',
            コンポーネント: ログイン
        },

        {
            パス: '/dashboard',
            名前: 'ダッシュボード'、
            コンポーネント: ダッシュボード、
            子供たち： [{
                パス: '/dashboard/movies',
                名前: 'dashboard.movi​​es',
                コンポーネント: 映画
            }
        ]、
        }
    ]
})


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

'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。
'./router/router' からルーターをインポートします
'./store' からストアをインポートします

Vue.config.productionTip = false


新しいVue({
  ルーター、
  店、
  レンダリング: h => h(App),
}).$mount('#app')

エクスポートデフォルト関数ゲスト（{ next, store }）{
    ストアの認証がログインしている場合
        次を返す({
           名前: 'ダッシュボード'
        })
    }
   
    次を返す()
   }

デフォルトの関数 auth ({ next, store }) をエクスポートします。
 （！store.getters.auth.loggedIn）の場合{
     次を返す({
        名前: 'ログイン'
     })
 }

 次を返す()
}

エクスポートデフォルト関数isSubscribed（{ next, store }）{
    サブスクライブされている場合
        次を返す({
           名前: 'ダッシュボード'
        })
    }
   
    次を返す()
   }

'vue' から Vue をインポートします
'vue-router' から Router をインポートします。
'../store' からストアをインポートします

'../components/Login' からログインをインポートします
'../components/Dashboard' からダッシュボードをインポートします
'../components/Movies' から Movies をインポートします

'./middleware/guest' からゲストをインポートします。
'./middleware/auth' から auth をインポートします。
'./middleware/isSubscribed' から isSubscribed をインポートします。

Vue.use(ルーター)

const router = 新しいルーター({
    モード: '履歴'、
    ベース: process.env.BASE_URL、
    ルート: [{
            パス: '/login',
            名前: 'ログイン',
            コンポーネント: ログイン、
            メタ: {
                ミドルウェア:
                    ゲスト
                ]
            }
        },
        {
            パス: '/dashboard',
            名前: 'ダッシュボード'、
            コンポーネント: ダッシュボード、
            メタ: {
                ミドルウェア:
                    認証
                ]
            },
            子供たち： [{
                パス: '/dashboard/movies',
                名前: 'dashboard.movi​​es',
                コンポーネント: 映画、
                メタ: {
                    ミドルウェア:
                        認証、
                        購読済み
                    ]
                }
            }],
        }
    ]
})

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

const router = 新しい Router({...})
router.beforeEach((to, from, next) => {
 //フックを解決するために必要なロジック
})

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

router.beforeEach((to, from, next) => {
    if (!to.meta.middleware) {
        次を返す()
    }
    const ミドルウェア = to.meta.middleware

    定数コンテキスト = {
        に、
        から、
        次、
        店
    }
    ミドルウェア[0]を返す({
        ...コンテクスト
    })
})

関数 middlewarePipeline (コンテキスト、ミドルウェア、インデックス) {
    const nextMiddleware = ミドルウェア[インデックス]

    if(!nextミドルウェア){
        コンテキストを返す.next 
    }

    戻り値 () => {
        const nextPipeline = ミドルウェアPipeline(
            コンテキスト、ミドルウェア、インデックス + 1
        ）

        nextMiddleware({ ...コンテキスト、次: nextPipeline })

    }
}

デフォルトのミドルウェアパイプラインをエクスポートする

const nextMiddleware = ミドルウェア[インデックス]
if(!nextミドルウェア){
コンテキストを返す.next
}

戻り値 () => {
const nextPipeline = ミドルウェアPipeline(
コンテキスト、ミドルウェア、インデックス + 1
）
nextMiddleware({ ...コンテキスト、次: nextPipeline })
}

'vue' から Vue をインポートします
'vue-router' から Router をインポートします。
'../store' からストアをインポートします

'../components/Login' からログインをインポートします
'../components/Dashboard' からダッシュボードをインポートします
'../components/Movies' から Movies をインポートします

'./middleware/guest' からゲストをインポートします。
'./middleware/auth' から auth をインポートします。
'./middleware/isSubscribed' から isSubscribed をインポートします。
'./middlewarePipeline' から middlewarePipeline をインポートします。

Vue.use(ルーター)

const router = 新しいルーター({
    モード: '履歴'、
    ベース: process.env.BASE_URL、
    ルート: [{
            パス: '/login',
            名前: 'ログイン',
            コンポーネント: ログイン、
            メタ: {
                ミドルウェア:
                    ゲスト
                ]
            }
        },
        {
            パス: '/dashboard',
            名前: 'ダッシュボード'、
            コンポーネント: ダッシュボード、
            メタ: {
                ミドルウェア:
                    認証
                ]
            },
            子供たち： [{
                パス: '/dashboard/movies',
                名前: 'dashboard.movi​​es',
                コンポーネント: 映画、
                メタ: {
                    ミドルウェア:
                        認証、
                        購読済み
                    ]
                }
            }],
        }
    ]
})

router.beforeEach((to, from, next) => {
    if (!to.meta.middleware) {
        次を返す()
    }
    const ミドルウェア = to.meta.middleware
    定数コンテキスト = {
        に、
        から、
        次、
        店
    }

    ミドルウェア[0]を返す({
        ...コンテクスト、
        次へ: middlewarePipeline(コンテキスト、ミドルウェア、1)
    })
})

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

ミドルウェア[0]を返す({
...コンテクスト、
次へ: middlewarePipeline(コンテキスト、ミドルウェア、1)
})