真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網站制作重慶分公司

Vue中間件管道如何使用

這篇“Vue中間件管道如何使用”文章的知識點大部分人都不太理解,所以小編給大家總結了以下內容,內容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“Vue中間件管道如何使用”文章吧。

創(chuàng)新互聯(lián)公司,專注為中小企業(yè)提供官網建設、營銷型網站制作、響應式網站、展示型成都網站制作、成都做網站等服務,幫助中小企業(yè)通過網站體現(xiàn)價值、有效益。幫助企業(yè)快速建站、解決網站建設與網站營銷推廣問題。

什么是中間件管道?

中間件管道(middleware pipeline) 是一堆彼此并行運行的不同的中間件。

繼續(xù)前面的案例,假設在 /dashboard/movies 上有另一個路由,我們只希望訂閱用戶可以訪問。我們已經知道要訪問 dashboard 路由,你需要進行身份驗證。那么應該怎樣保護  /dashboard/movies  路由以確保只有經過身份驗證和訂閱的用戶才能訪問呢?通過使用中間件管道,可以將多個中間件鏈接在一起并確保它們能夠并行運行。

開始

首先用 Vue CLI[2] 快速構建一個新的 Vue 項目。

vue create vue-middleware-pipeline

安裝依賴項

創(chuàng)建并安裝項目目錄后,切換到新創(chuàng)建的目錄并從終端運行以下命令:

npm i vue-router vuex

Vue-router[3] — 是Vue.js的官方路由器

Vuex[4] — 是 Vue 的狀態(tài)管理庫

創(chuàng)建組件

我們的程序將包含三個組件。

Login?—?此組件展示給尚未通過身份驗證的用戶。

Dashboard?— 此組件展示給已登錄的用戶。

Movies?—?我們會向已登錄并擁有有效訂閱的用戶顯示此組件。

讓我們創(chuàng)建這些組件。切換到 src/components 目錄并創(chuàng)建以下文件:Dashboard.vue、Login.vue和Movies.vue

使用以下代碼編輯 Login.vue 文件:

使用以下代碼編輯 Dashboard.vue 文件:

最后,將以下代碼添加到 Movies.vue 文件中:

創(chuàng)建store

就 Vuex 而言,store 只是一個用于保存我們程序狀態(tài)的容器。它允許我們確定用戶是否經過身份驗證以及檢查用戶是否已訂閱。

在 src 文件夾中,創(chuàng)建一個 store.js 文件并將以下代碼添加到該文件中:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        user: {
            loggedIn: false,
            isSubscribed: false
        }
    },
    getters: {
        auth(state) {
            return state.user
        }
    }
})

store 在其 狀態(tài) 內包含一個 user 對象。user 對象包含 loggedIn 和 isSubscribed 屬性,它可以幫助我們確定用戶是否已登錄并具有有效訂閱。我們還在 store 中定義了一個 getter 來返回 user 對象。

定義路由

在創(chuàng)建路由之前,應該先定義它們,并關聯(lián)將要附加到其上的對應的中間件。

除了通過身份驗證的用戶之外,每個人都可以訪問 /login。當通過身份驗證的用戶訪問此路由時,應重定向到 dashboard 路由。這條路由應該附有一個 guest 中間件。

只有通過身份驗證的用戶才能訪問 /dashboard。否則用戶在訪問此路由時應重定向到 /login 路由。我們把 auth 中間件與此路由相關聯(lián)。

只有通過身份驗并訂閱的用戶才能訪問 /dashboard/movies。該路由受到 isSubscribed和 auth 中間件的保護。

創(chuàng)建路由

接下來,在 src 目錄中創(chuàng)建一 個router 文件夾,然后在該文件夾中創(chuàng)建一個 router.js 文件。使用以下代碼編輯文件:

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

import Login from '../components/Login'
import Dashboard from '../components/Dashboard'
import Movies from '../components/Movies'


Vue.use(Router)

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/login',
            name: 'login',
            component: Login
        },

        {
            path: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            children: [{
                path: '/dashboard/movies',
                name: 'dashboard.movies',
                component: Movies
            }
        ],
        }
    ]
})


export default router

在這里,我們創(chuàng)建了一個新的 router 實例,同時傳遞了幾個配置選項以及一個 routes 屬性,它接受我們之前定義的所有路由。要注意目前這些路由還都是不受保護的。我們很快就會解決這個問題。

接下來將路由和 store 注入Vue 實例。使用以下代碼編輯 src/main.js 文件:

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store'

Vue.config.productionTip = false


new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

創(chuàng)建中間件

在 src/router 目錄中創(chuàng)建一個 middleware 文件夾,然后在該文件夾下創(chuàng)建 guest.js,auth.js和IsSubscribed.js文件。將以下代碼添加到 guest.js 文件中:

export default function guest ({ next, store }){
    if(store.getters.auth.loggedIn){
        return next({
           name: 'dashboard'
        })
    }
   
    return next()
   }

guest 中間件檢查用戶是否通過了身份驗證。如果通過了身份驗證就會被重定向到 dashboard 路徑。

接下來,用以下代碼編輯 auth.js 文件:

export default function auth ({ next, store }){
 if(!store.getters.auth.loggedIn){
     return next({
        name: 'login'
     })
 }

 return next()
}

在 auth 中間件中,我們用 store 檢查用戶當前是否已經 authenticated。根據(jù)用戶是否已經登錄,我們要么繼續(xù)請求,要么將其重定向到登錄頁面。

使用以下代碼編輯 isSubscribed.js 文件:

export default function isSubscribed ({ next, store }){
    if(!store.getters.auth.isSubscribed){
        return next({
           name: 'dashboard'
        })
    }
   
    return next()
   }

isSubscribed 中的中間件類似于 auth 中間件。我們用 store檢查用戶是否訂閱。如果用戶已訂閱,那么他們可以訪問預期路由,否則將其重定向回 dashboard 頁面。

保護路由

現(xiàn)在已經創(chuàng)建了所有中間件,讓我們利用它們來保護路由。使用以下代碼編輯 src/router/router.js 文件:

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

import Login from '../components/Login'
import Dashboard from '../components/Dashboard'
import Movies from '../components/Movies'

import guest from './middleware/guest'
import auth from './middleware/auth'
import isSubscribed from './middleware/isSubscribed'

Vue.use(Router)

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
            path: '/login',
            name: 'login',
            component: Login,
            meta: {
                middleware: [
                    guest
                ]
            }
        },
        {
            path: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            meta: {
                middleware: [
                    auth
                ]
            },
            children: [{
                path: '/dashboard/movies',
                name: 'dashboard.movies',
                component: Movies,
                meta: {
                    middleware: [
                        auth,
                        isSubscribed
                    ]
                }
            }],
        }
    ]
})

export default router

在這里,我們導入了所有中間件,然后為每個路由定義了一個包含中間件數(shù)組的元字段。中間件數(shù)組包含我們希望與特定路由關聯(lián)的所有中間件。

Vue 路由導航守衛(wèi)

我們使用 Vue Router 提供的導航守衛(wèi)[5]來保護路由。這些導航守衛(wèi)主要通過重定向或取消路由的方式來保護路由。

其中一個守衛(wèi)是全局守衛(wèi),它通常是在觸發(fā)路線之前調用的鉤子。要注冊一個全局的前衛(wèi),需要在 router 實例上定義一個 beforeEach 方法。

const router = new Router({ ... })
router.beforeEach((to, from, next) => {
 //necessary logic to resolve the hook
})

beforeEach 方法接收三個參數(shù):

to: 這是我們打算訪問的路由。

from: 這是我們目前的路由。

next: 這是調用鉤子的 function。

運行中間件

使用 beforeEach 鉤子可以運行我們的中間件。

const router = new Router({ ...})

router.beforeEach((to, from, next) => {
    if (!to.meta.middleware) {
        return next()
    }
    const middleware = to.meta.middleware

    const context = {
        to,
        from,
        next,
        store
    }
    return middleware[0]({
        ...context
    })
})

我們首先檢查當前正在處理的路由是否有一個包含 middleware 屬性的元字段。如果找到 middleware 屬性,就將它分配給 const 變量。接下來定義一個 context 對象,其中包含我們需要傳遞給每個中間件的所有內容。然后,把中間件數(shù)組中的第一個中間件做為函數(shù)去調用,同時傳入 context 對象。

嘗試訪問 /dashboard 路由,你應該被重定向到 login 路由。這是因為 /src/store.js 中的 store.state.user.loggedIn 屬性被設置為 false。將 store.state.user.loggedIn 屬性改為 true,就應該能夠訪問 /dashboard 路由。

現(xiàn)在中間件正在運行,但這并不是我們想要的方式。我們的目標是實現(xiàn)一個管道,可以針對特定路徑運行多個中間件。

return middleware[0]({ …context} "0")
注意上面代碼塊中的這行代碼,我們只調用從 meta 字段中的中間件數(shù)組傳遞的第一個中間件。那么我們怎樣確保數(shù)組中包含的其他中間件(如果有的話)也被調用呢?這就是管道派上用場的地方。

創(chuàng)建管道

切換到 src/router 目錄,然后創(chuàng)建一個 middlewarePipeline.js 文件。將以下代碼添加到文件中:

function middlewarePipeline (context, middleware, index) {
    const nextMiddleware = middleware[index]

    if(!nextMiddleware){
        return context.next 
    }

    return () => {
        const nextPipeline = middlewarePipeline(
            context, middleware, index + 1
        )

        nextMiddleware({ ...context, next: nextPipeline })

    }
}

export default middlewarePipeline

middlewarePipeline 有三個參數(shù):

context:  這是我們之前創(chuàng)建的 context 對象,它可以傳遞給棧中的每個中間件。

middleware: 這是在 route 的 meta 字段上定義的middleware 數(shù)組本身。

index: 這是在 middleware 數(shù)組中運行的當前中間件的 index。

const nextMiddleware = middleware[index]
if(!nextMiddleware){
return context.next
}

在這里,我們只是在傳遞給 middlewarePipeline 函數(shù)的 index 中拔出中間件。如果在 index 沒有找到 middleware,則返回默認的 next 回調。

return () => {
const nextPipeline = middlewarePipeline(
context, middleware, index + 1
)
nextMiddleware({ ...context, next: nextPipeline })
}

我們調用 nextMiddleware 來傳遞 context, 然后傳遞 nextPipeline const。值得注意的是,middlewarePipeline 函數(shù)是一個遞歸函數(shù),它將調用自身來獲取下一個在堆棧中運行的中間件,同時將index增加為1。

把它們放在一起

讓我們使用middlewarePipeline。像下面這段代碼一樣編輯 src/router/router.js 文件:

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'

import Login from '../components/Login'
import Dashboard from '../components/Dashboard'
import Movies from '../components/Movies'

import guest from './middleware/guest'
import auth from './middleware/auth'
import isSubscribed from './middleware/isSubscribed'
import middlewarePipeline from './middlewarePipeline'

Vue.use(Router)

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
            path: '/login',
            name: 'login',
            component: Login,
            meta: {
                middleware: [
                    guest
                ]
            }
        },
        {
            path: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            meta: {
                middleware: [
                    auth
                ]
            },
            children: [{
                path: '/dashboard/movies',
                name: 'dashboard.movies',
                component: Movies,
                meta: {
                    middleware: [
                        auth,
                        isSubscribed
                    ]
                }
            }],
        }
    ]
})

router.beforeEach((to, from, next) => {
    if (!to.meta.middleware) {
        return next()
    }
    const middleware = to.meta.middleware
    const context = {
        to,
        from,
        next,
        store
    }

    return middleware[0]({
        ...context,
        next: middlewarePipeline(context, middleware, 1)
    })
})

export default router

在這里,我們使用 middlewarePipeline 來運行棧中包含的后續(xù)中間件。

return middleware[0]({
...context,
next: middlewarePipeline(context, middleware, 1)
})

在調用第一個中間件之后,使用 middlewarePipeline 函數(shù),還會調用棧中包含的后續(xù)中間件,直到不再有中間件可用。

如果你訪問 /dashboard/movies 路由,應該被重定向到 /dashboard。這是因為 user 當前是 authenticated 但沒有有效訂閱。如果將 store 中的 store.state.user.isSubscribed 屬性設置為 true,就應該可以訪問 /dashboard/movies 路由了。

以上就是關于“Vue中間件管道如何使用”這篇文章的內容,相信大家都有了一定的了解,希望小編分享的內容對大家有幫助,若想了解更多相關的知識內容,請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。


網頁名稱:Vue中間件管道如何使用
地址分享:http://weahome.cn/article/psooes.html

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部