nuxtjs/auth module redirect 안 될 때

nuxtjs에서 인증, 페이지 제한 등을 하기 위해서 그 동안 쿠키와 로컬스토리지 등을 이용해 직접 구현해야 했는데, 이제는 auth 모듈이란 게 나왔다.

냉큼 적용하려고 했는데 이상하게 안 되는 게 있다.

먼저, auth 모듈에 대해 간단히 설명한다.

1. yarn add @nuxtjs/auth로 설치한다.

2. nuxt.config.js에 auth 관련 설정을 추가한다.

3. 만약 nuxt.config.js에서 router의 middleware에 auth 모듈을 추가하면, 이 nuxt 프로젝트의 모든 페이지는 라우팅될 때 로그인 여부를 검사한다.

4. 이 때 특정 페이지, 예컨데 index 페이지처럼 로그인하지 않아도 볼 수 있어야 페이지인 경우 auth: false를 적용한다.

<script>
    export default {
        auth: false
    }
</script>

자세한 사용방법은 홈페이지에도 나와있는 유투브를 보자. 문서가 그지같다. 나는 유투브를 보고서야 사용할 수 있었다. Nuxt Auth - Authentication and Authorization in NuxtJS

나에게 생긴 문제는 이렇다. 예를 들어 로그인하지 않은 상태에서 /profile/change 이란 페이지에 접근했다고 하자. 그러면 auth 모듈을 잘 설정했다면 login 페이지로 리다이렉팅된다. login 페이지에서 로그인을 하면, 쿠키와 로컬스토리지에 auth.redirect 라는 키에 /profile/change가 생성된다. 이 상태에서 로그인을 하면 auth.redirect에 저장된 페이지로 리다이렉팅한다.

삽질을 2~3일을 했다. 어처구니없게도 해결방법은 간단하다. 참고: Not redirecting after login when going directly on the route. login 페이지는 로그인 안 된 상태에서 접근할 수 있어야 하기 때문에 auth: false로 설정했는데, 이 코드를 빼면 된다.

<script>
  export default {
    // auth: false
  }
</script>

공식문서에서 로그인 페이지에는 저 옵션 주지 말라고 한 줄 쓰면 될 일을... Not redirecting after login when going directly on the route 이 이슈에서 가장 좋아요, 사랑해요, 하트뿅뿅 선택받은 댓글이 아니었으면, 나를 포함한 수 많은 중생들이 고통받았을 것이다.