Vue의 미들웨어 파이프라인에 대해 자세히 알아보세요.
- 青灯夜游앞으로
- 2020-10-02 12:23:305014검색
일반적으로 SPA를 구축할 때 특정 경로를 보호해야 합니다. 예를 들어, 인증된 사용자만 액세스할 수 있도록 허용하는 대시보드 경로가 있다고 가정해 보겠습니다. 인증 미들웨어를 사용하면 합법적인 사용자만 액세스할 수 있습니다.
이 튜토리얼에서는 Vue-Router를 사용하여 Vue 애플리케이션용 미들웨어 파이프라인을 구현하는 방법을 알아봅니다.
미들웨어 파이프라인이란 무엇인가요?
미들웨어 파이프라인은 서로 병렬로 실행되는 다양한 미들웨어 묶음입니다.
이전 사례에 이어, 구독한 사용자만 액세스할 수 있도록 /dashboard/movies에 다른 경로가 있다고 가정해 보겠습니다. 대시보드 경로에 액세스하려면 인증이 필요하다는 것을 이미 알고 있습니다. 그렇다면 인증되고 구독한 사용자만 액세스할 수 있도록 /dashboard/movies 경로를 어떻게 보호해야 할까요? 미들웨어 파이프라인을 사용하면 여러 미들웨어를 함께 연결하고 병렬로 실행되도록 할 수 있습니다. /dashboard/movies 上有另一个路由，我们只希望订阅用户可以访问。我们已经知道要访问 dashboard 路由，你需要进行身份验证。那么应该怎样保护 /dashboard/movies 路由以确保只有经过身份验证和订阅的用户才能访问呢？通过使用中间件管道，可以将多个中间件链接在一起并确保它们能够并行运行。
开始
首先用 Vue CLI 快速构建一个新的 Vue 项目。
vue create vue-middleware-pipeline
安装依赖项
创建并安装项目目录后，切换到新创建的目录并从终端运行以下命令：
npm i vue-router vuex
Vue-router — 是Vue.js的官方路由器
Vuex — 是 Vue 的状态管理库
创建组件
我们的程序将包含三个组件。
Login — 此组件展示给尚未通过身份验证的用户。
Dashboard — 此组件展示给已登录的用户。
Movies — 我们会向已登录并拥有有效订阅的用户显示此组件。
让我们创建这些组件。切换到 src/components 目录并创建以下文件：Dashboard.vue、Login.vue和Movies.vue
使用以下代码编辑 Login.vue 文件：
<template>
<p>
<p>This is the Login component</p>
</p>
</template>使用以下代码编辑 Dashboard.vue 文件：
<template>
<p>
<p>This is the Dashboard component for authenticated users</p>
<router-view/>
</p>
</template>最后，将以下代码添加到 Movies.vue 文件中：
<template>
<p>
<p>This is the Movies component for authenticated and subscribed users</p>
</p>
</template>创建store
就 Vuex 而言，store 只是一个用于保存我们程序状态的容器。它允许我们确定用户是否经过身份验证以及检查用户是否已订阅。
在 src 文件夹中，创建一个 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 在其 状态 内包含一个 user 对象。 user 对象包含 loggedIn 和 isSubscribed 属性，它可以帮助我们确定用户是否已登录并具有有效订阅。我们还在 store 中定义了一个 getter 来返回 user 对象。
定义路由
在创建路由之前，应该先定义它们，并关联将要附加到其上的对应的中间件。
除了通过身份验证的用户之外，每个人都可以访问 /login。当通过身份验证的用户访问此路由时，应重定向到 dashboard 路由。这条路由应该附有一个 guest 中间件。
只有通过身份验证的用户才能访问 /dashboard。否则用户在访问此路由时应重定向到 /login 路由。我们把 auth 中间件与此路由相关联。
只有通过身份验并订阅的用户才能访问 /dashboard/movies。该路由受到 isSubscribed和 auth 中间件的保护。
创建路由
接下来，在 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'
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在这里，我们创建了一个新的 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')创建中间件
在 src/router 目录中创建一个 middleware 文件夹，然后在该文件夹下创建 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()
}🎜🎜Install dependency🎜🎜🎜프로젝트 디렉터리를 생성하고 설치한 후 새로 생성된 디렉터리로 전환하고 터미널에서 다음 명령을 실행하세요: 🎜export default function isSubscribed ({ next, store }){
if(!store.getters.auth.isSubscribed){
return next({
name: 'dashboard'
})
}
return next()
}🎜Vue-router — Vue.js🎜🎜Vuex — Vue🎜🎜🎜Create Components🎜🎜🎜용 상태 관리 라이브러리입니다. 우리 프로그램에는 세 가지 구성 요소가 포함됩니다. 🎜🎜🎜Login🎜 — 이 구성요소는 아직 인증되지 않은 사용자에게 표시됩니다. 🎜🎜🎜Dashboard🎜 — 이 구성 요소는 로그인한 사용자에게 표시됩니다. 🎜🎜🎜Movies🎜 — 로그인하고 구독 중인 사용자에게 이 구성요소를 표시합니다. 🎜🎜이러한 구성 요소를 만들어 보겠습니다. src/comComponents 디렉터리로 변경하고 Dashboard.vue, Login.vue 및 Movies.vue 🎜🎜다음 코드를 사용하여 <code>Login.vue 파일을 편집합니다. 🎜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🎜다음 코드를 사용하여 Dashboard.vue 파일을 편집합니다. 🎜const router = new Router({ ... })
router.beforeEach((to, from, next) => {
//necessary logic to resolve the hook
})🎜마지막으로 추가 다음 코드를 Movies.vue 파일에 추가하세요: 🎜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
})
})🎜🎜Create store🎜🎜🎜Vuex에 관한 한, store는 상태를 저장하기 위한 컨테이너일 뿐입니다. 우리 프로그램. 이를 통해 사용자가 인증되었는지 확인하고 사용자가 구독했는지 확인할 수 있습니다. 🎜🎜src 폴더에서 store.js 파일을 생성하고 파일에 다음 코드를 추가합니다. 🎜return middleware[0]({ …context})🎜store에는 해당 상태 내에 user 개체가 포함되어 있습니다. user 개체에는 사용자가 로그인되어 있고 유효한 구독이 있는지 확인하는 데 도움이 되는 loggedIn 및 isSubscribed 속성이 포함되어 있습니다. 또한 user 개체를 반환하기 위해 저장소에 getter를 정의합니다. 🎜🎜🎜경로 정의🎜🎜🎜경로를 생성하기 전에 경로를 정의하고 경로에 연결할 해당 미들웨어를 연결해야 합니다. 🎜🎜/login은 인증된 사용자를 제외한 모든 사람이 액세스할 수 있습니다. 인증된 사용자가 이 경로에 액세스하면 대시보드 경로로 리디렉션되어야 합니다. 이 경로에는 guest 미들웨어가 함께 제공되어야 합니다. 🎜🎜인증된 사용자만 /dashboard에 액세스할 수 있습니다. 그렇지 않으면 사용자가 이 경로에 액세스할 때 /login 경로로 리디렉션되어야 합니다. auth 미들웨어를 이 경로와 연결합니다. 🎜🎜인증을 받고 구독한 사용자만 /dashboard/movies에 액세스할 수 있습니다. 경로는 isSubscribed 및 auth 미들웨어로 보호됩니다. 🎜🎜🎜경로 만들기🎜🎜🎜다음으로 src 디렉터리에 router 폴더를 만든 다음 해당 폴더 /code에 router.js 파일. 다음 코드를 사용하여 파일을 편집합니다. 🎜<pre class="brush:js;toolbar:false;">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</pre>🎜여기서 몇 가지 구성 옵션과 이전에 정의한 All을 허용하는 <code>routes 속성을 전달하여 새로운 router 인스턴스를 생성합니다. 경로. 이 경로는 현재 보호되지 않습니다. 곧 이 문제를 해결하겠습니다. 🎜🎜다음으로 라우팅을 삽입하고 Vue 인스턴스에 저장합니다. 다음 코드로 src/main.js 파일을 편집하세요: 🎜const nextMiddleware = middleware[index]
if(!nextMiddleware){
return context.next
}🎜🎜Create middleware🎜🎜🎜src/router에서 middleware만들기 디렉토리 > 폴더로 이동한 다음 폴더 아래에 guest.js, auth.js 및 IsSubscribed.js 파일을 만듭니다. guest.js 파일에 다음 코드를 추가합니다. 🎜return () => {
const nextPipeline = middlewarePipeline(
context, middleware, index + 1
)
nextMiddleware({ ...context, next: nextPipeline })
}🎜 guest 미들웨어는 사용자가 인증되었는지 확인합니다. 인증이 통과되면 대시보드 경로로 리디렉션됩니다. 🎜🎜다음으로, 다음 코드를 사용하여 auth.js 파일을 편집하세요. 🎜export default function auth ({ next, store }){
if(!store.getters.auth.loggedIn){
return next({
name: 'login'
})
}
return next()
}在 auth 中间件中，我们用 store 检查用户当前是否已经 authenticated。根据用户是否已经登录，我们要么继续请求，要么将其重定向到登录页面。
使用以下代码编辑 isSubscribed.js 文件：
export default function isSubscribed ({ next, store }){
if(!store.getters.auth.isSubscribed){
return next({
name: 'dashboard'
})
}
return next()
}isSubscribed 中的中间件类似于 auth 中间件。我们用 store检查用户是否订阅。如果用户已订阅，那么他们可以访问预期路由，否则将其重定向回 dashboard 页面。
保护路由
现在已经创建了所有中间件，让我们利用它们来保护路由。使用以下代码编辑 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在这里，我们导入了所有中间件，然后为每个路由定义了一个包含中间件数组的元字段。中间件数组包含我们希望与特定路由关联的所有中间件。
Vue 路由导航守卫
我们使用 Vue Router 提供的导航守卫来保护路由。这些导航守卫主要通过重定向或取消路由的方式来保护路由。
其中一个守卫是全局守卫，它通常是在触发路线之前调用的钩子。要注册一个全局的前卫，需要在 router 实例上定义一个 beforeEach 方法。
const router = new Router({ ... })
router.beforeEach((to, from, next) => {
//necessary logic to resolve the hook
})beforeEach 方法接收三个参数：
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 对象，其中包含我们需要传递给每个中间件的所有内容。然后，把中间件数组中的第一个中间件做为函数去调用，同时传入 context 对象。
尝试访问 /dashboard 路由，你应该被重定向到 login 路由。这是因为 /src/store.js 中的 store.state.user.loggedIn 属性被设置为 false。将 store.state.user.loggedIn 属性改为 true，就应该能够访问 /dashboard 路由。
现在中间件正在运行，但这并不是我们想要的方式。我们的目标是实现一个管道，可以针对特定路径运行多个中间件。
return middleware[0]({ …context})注意上面代码块中的这行代码，我们只调用从 meta 字段中的中间件数组传递的第一个中间件。那么我们怎样确保数组中包含的其他中间件（如果有的话）也被调用呢？这就是管道派上用场的地方。
创建管道
切换到 src/router 目录，然后创建一个 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 middlewarePipelinemiddlewarePipeline 有三个参数：
context: 这是我们之前创建的 context 对象，它可以传递给栈中的每个中间件。
middleware: 这是在 route 的 meta 字段上定义的middleware 数组本身。
index: 这是在 middleware 数组中运行的当前中间件的 index。
const nextMiddleware = middleware[index]
if(!nextMiddleware){
return context.next
}在这里，我们只是在传递给 middlewarePipeline 函数的 index 中拔出中间件。如果在 index 没有找到 middleware，则返回默认的 next 回调。
return () => {
const nextPipeline = middlewarePipeline(
context, middleware, index + 1
)
nextMiddleware({ ...context, next: nextPipeline })
}我们调用 nextMiddleware 来传递 context， 然后传递 nextPipeline const。值得注意的是，middlewarePipeline 函数是一个递归函数，它将调用自身来获取下一个在堆栈中运行的中间件，同时将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在这里，我们使用 ffbe95d20f3893062224282accb13e8f middlewarePipeline ffbe95d20f3893062224282accb13e8f来运行栈中包含的后续中间件。
return middleware[0]({
...context,
next: middlewarePipeline(context, middleware, 1)
})在调用第一个中间件之后，使用 middlewarePipeline 函数，还会调用栈中包含的后续中间件，直到不再有中间件可用。
/dashboard/movies 路由，应该被重定向到 /dashboard。这是因为 user 当前是 authenticated 但没有有效订阅。如果将 store 中的 store.state.user.isSubscribed 属性设置为 true，就应该可以访问 /dashboard/movies노선을 방문하시면.
결론
미들웨어는 애플리케이션의 다양한 경로를 보호하는 훌륭한 방법입니다. 이는 여러 미들웨어를 사용하여 Vue 애플리케이션에서 단일 경로를 보호할 수 있는 매우 간단한 구현입니다. 모든 소스 코드는 (https://github.com/Dotunj/vue-middleware-pipelines)에서 찾을 수 있습니다.
관련 권장 사항:
더 많은 프로그래밍 관련 지식을 원하시면 문의하세요. 방문: 프로그래밍 입문! !
위 내용은 Vue의 미들웨어 파이프라인에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!