VUE(NUXT) middleware 적용해보기

 

지난 글에서는 nuxt 프레임워크를 포함한 vue 프로젝트의 개발환경을 설치하였다. 

2024.01.28 - [개발/FRONT] - VUE(NUXT) 설치하기

VUE(NUXT) 설치하기

 

 

이번 포스팅에서는 middleware에 대해서 알아보자. 

 

전역 middleware 설정은 nuxt.config.js 파일에서 할 수 있고, 

layout에 설정해서 페이지마다도 별도로 설정할 수 있다. 

 

나는 페이지별로 middleware를 모두 적용시키지 않을 예정이라 레이아웃별로 설정했다. 

 

우선, 설치한 프로젝트에서 middleware라는 폴더가 없다면 신규로 생성한다.

그 다음 middleware 폴더에 auth.js 라는 신규 파일을 생성한다.

 

그리고 layouts 폴더 하위에 default.vue 파일을 열어 

아래와 같이 middleware : 'auth' 를 추가한다.

(layouts 폴더가 없다면 신규로 생성해서 만든다.)

 

<template>
  <div>
    <nuxt/>
  </div>
</template>
<script>
  export default {
    middleware: 'auth',
  }
</script>

 

middleware 폴더 하위에 auth.js 를 default.vue 파일에서 사용하겠다는 의미이다. 

 

그리고 pages 폴더 밑에 login 이라는 폴더를 만들고 그 밑에 login.vue 파일을 만든다.

 

그리고 login.vue에 아래와 같이 설정한다. 

 

<template>
    <div>
      <h1>Login Page</h1>
      <p>Hi from {{ name }}</p>
      <table>
        <tr>
          <td><span>ID: </span></td>
          <td><input type="text" /></td>
        </tr>
        <tr>
          <td><span>PW: </span></td>
          <td><input type="password" /></td>
        </tr>
        <tr>
          <td colspan="2" align="center"><button>로그인</button></td>
        </tr>
        <tr>
          <td colspan="2" align="center" @click="change">Go Home</td>
        </tr>
      </table>
    </div>
  </template>
   
  <script>
  export default {
    layout: 'default',
    asyncData () {
      return {
        name: process.static ? 'static' : (process.server ? 'server' : 'client')
      }
    },
    head: {
      title: 'Login Page'
    }
  }
  </script>

 

<script> 안에 layout: 'default' 가 보일 것이다. 

 

그리고 나서 login/login을 실행시켜본다. 

그러면 auth.js가 실행될 것이다. 

 

auth.js는 아래와 같이 확인했다.

export default ({ store, route, redirect }) => {
   console.log("auth")
}

 

 

auth.js를 안 타게 하려면, 

layouts 폴더 밑에 default2.vue 파일을 설정하고 해당 파일 안에 middleware 부분을 없앤다. 

<template>
  <div>
    <nuxt/>
  </div>
</template>
<script>
  export default {}
</script>

 

이렇게 설정한 후, pages 폴더 밑의 다른 페이지에 default2 레이아웃을 적용시키면 auth.js를 타지 않게 된다.