middleware란?

· 페이지 렌더링이 수행되기 전에 자신의 함수를 실행할 수 있습니다.
· 사용자 인증이 끝나지 않은 상태에서 특정 페이지에 액세스했을 경우의 리디렉션 처리 등에 사용된다.

페이지에서 호출

midlleware 디렉토리 및 pages 디렉토리 아래에 다음과 같이 작성

|--middleware
   |--page1.js
   |--page2.js
   |--page3.js
|--pages
   |--page1.vue
   |--page2.vue
   |--page3.vue

middleware가 호출되면 실행할 함수를 export default로 반환합니다.

콘솔에 middleware page名 를 표시합니다.

middoleware/page1.js

export default () => {
  console.log('middleware page1');
}

middoleware/page2.js

export default () => {
  console.log('middleware page2');
}

middoleware/page3.js

export default () => {
  console.log('middleware page3');
}

각 page에서는 각각의 page명에 대응한 middleware를 부른다.

page/page1.vue

<template>
  <div>
    page1
  </div>
</template>

<script>
export default {
  middleware: [
    ['page1']
  ]
}
</script>

page/page2.vue

<template>
  <div>
    page2
  </div>
</template>

<script>
export default {
  middleware: [
    ['page2']
  ]
}
</script>

page/page3.vue

<template>
  <div>
    page3
  </div>
</template>

<script>
export default {
  middleware: [
    ['page3']
  ]
}
</script>

각 page에 대한 링크를 layouts에 만들어 둡니다.

layouts/default.vue

<template>
  <div>
    <hr>
    <NuxtLink to="/page1">page1</NuxtLink>
    <NuxtLink to="/page2">page2</NuxtLink>
    <NuxtLink to="/page3">page3</NuxtLink>
    <hr>
    <Nuxt />
  </div>
</template>

결과
layouts에서 호출 middlleware 디렉토리 아래에 layouts.js를 추가합니다. middoleware/layouts.js export default () => { console.log('layouts') } layouts/default.vue <template> <div> <hr> <NuxtLink to="/page1">page1</NuxtLink> <NuxtLink to="/page2">page2</NuxtLink> <NuxtLink to="/page3">page3</NuxtLink> <hr> <Nuxt/> </div> </template> <script> export default { middleware: ['layouts'] } </script> 결과 layouts에서 부르는 것으로 모든 페이지에 액세스했을 때에 공통의 처리를 실행할 수 있습니다. nuxt.config.js에서 호출 middlleware 디렉토리 아래에 config.js를 추가합니다. middoleware/config.js export default () => { console.log('nuxt.config.js'); } nuxt.config.js export default { //... 생략 router: { middleware: [ 'config' ] } //... 생략 } 결과 nuxt.config.js에서 호출하면 layouts에서 호출하는 것과 같으며 모든 페이지에서 공통 처리로 호출되지만 실행 순서에주의하십시오.

nuxt.config.js→layouts→pages의 순서로 불리는 것을 알 수 있습니다.

context 객체

middleware는 첫 번째 인수에 context 객체를 사용합니다.

context는 다양한 데이터를 포함합니다. 자세한 내용은 여기

마지막으로 context를 사용하여 쉽게 인증, 리디렉션 처리를 만듭니다.

store state 에 status 를 준비하고,
초기값을 true 로 합니다.mutations 의 호출로 true 와 false 를 전환하도록 합니다.

store/index.js

export const state = () => ({
  status: true
})

export const mutations = {
  changeStatus(state){
    state.status = !state.status;
  }
}

pages/page1로 true , false 를 전환하는 버튼을 준비합니다.

page/page1.vue

<template>
  <div>
    page1
    <button @click="$store.commit('changeStatus')">{{$store.state.status}}</button>
  </div>
</template>

・버튼(state.status)이 false일 때는 page3에 넣지 않는다.
・버튼(state.status)이 true일 때는 page2에 넣지 않는다.

같은 사양으로합니다.

middlleware 디렉토리 아래에 auth.js를 추가합니다.
nuxt.config.js에서 호출합니다.

middoleware/auth.js

export default ({store, route, redirect }) => {
  if (store.state.status && route.path === '/page3') {
    console.log('true時はpage3へ行けません。page1に戻ります。');
    redirect('/page1');
  } else if (!store.state.status && route.path === '/page2') {
    console.log('false時はpage2へ行けません。page1に戻ります。');
    redirect('/page1');
  }
}

nuxt.config.js

//・・・省略

  router: {
    middleware: [
      'auth'
    ]
  }

//・・・省略

}

결과

이상입니다. 여기까지 봐 주셔서 감사합니다!