routing middleware(Vue)

middleware란?

 

원래 미들웨어는 컴퓨터 프로그램 사이에서 중간 처리를 하는 프로그램을 의미한다.

Nuxt.js는 middleware디렉토리 내에 존재하는 javascript 파일을 컴포넌트, 레이아웃 라우터에서 미들웨어로써 활용할 수 있도록 지원해준다.

 

쉽게 풀어서 말하자면

 

웹사이트에서 로그인을 했는데 회원가입을 들어갈리가 없고,

반대로 비로그인 상태에서 프로필화면에 들어갈 수 없다.

이와같이 route를 변경할때 그 사이에서 걸러주었으면 하는 역할이나 예외처리를 해야할 것들,

아니면 어떤 페이지를 접속시마다 특정 기능이 실행되었으면 하겠다 하는 기능을

모두 이 middleware에서 처리하고 있다.

 

 

 

예제

 

 

 

기존에 만들던 페이지에서

로그인 상태임에도 불구하고 회원가입 페이지에 계속 머물러 있었기 때문에

로그인 상태가 되면 자동으로 메인화면으로 이동시키려고 한다.

 

 

 

먼저 middleware 디렉토리 생성후 

비로그인 상태인 사용자를 검사하는 미들웨어 anonymous.js와

로그인 상태인 사용자를 검사하는 미들웨어 authenticated.js를 생성해주었다.

 

 

// anonymous.js
// 로그인을 안한 사용자인지 검사하는 미들웨어
// 로그인을 한 사용자면 메인페이지로 리다이렉트
// 미들웨어에서 디스패치나 엑시오스등등 무엇을 할지는 작성자 마음
export default function({ store, redirect }) {
  if (store.state.users.me) {
     return redirect("/");
  }
}

 

// authenticated.js
// 로그인을 한 사용자인지 검사하는 미들웨어
// 로그인하지 않은 사람은 접근못하고 리다이렉트(되돌려보냄)
// 미들웨어에서 디스패치나 엑시오스등등 무엇을 할지는 작성자 마음
export default function({ store, redirect }) {
  if (!store.state.users.me) {
     return redirect("/");
  }
}

 

그 다음 코드를 작성해준 뒤

 

profile page(프로필페이지)와 signup page(회원가입페이지)에 코드를 추가해주었다.

 

 

//profile
<script>
.
.
.
  head() {
    return {
      title: "프로필"
    };
  },
  middleware: "authenticated"
};
</script>

 

//signup
<script>
export default {
  .
  .
  .
  watch: {
    me(value, oldValue) {
      if (value) {
        this.$router.push({
          path: "/"
        });
      }
    }
  },
  methods: {
  .
  .
  .
  },
  head() {
    return {
      title: "회원가입"
    };
  },
  middleware: "anonymous"
};
</script>

 

 

 

결과

 

 

정상적으로 redirect를 통해 메인페이지로 이동되는 모습이다.