nuxtjs/auth-next 설치

nuxt.config.js에 다음 코드들을 저장한다.

 

buildModules:{
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
}
auth: {
    strategies: {
        google: {
            clientId: configFile.client_id, // client_id는 노출되지 않게 따로 관리하기 위해 configFile에서 가져옴
            codeChallengeMethod: '',
            responseType: ['token', 'id_token'],
        },
    },
    redirect: {
        login: '/login',
        logout: '/',
        callback: '/login',
        home: '/',
    },
},

그리고 pages에 login.vue를 추가하여야 한다. (그렇지 않으면 로그인 후 /login으로 갈 때 404가 뜬다)

router: { middleware: ['auth'] } //nuxt.config.js에 router>middleware에 auth를 거는 코드

export default { middleware: 'auth' } // 페이지 별로 middleware에 auth를 거는 코드

이 때, rotuer의 middleware에 auth를 추가하면 어디를 가든 로그인을 하라고 강요한다. 그래서 로그인이 필요한 페이지가 많지 않다면, 각 페이지 middleware에 auth를 추가하는게 적절하다.

 

CDN을 사용해서 구글 로그인을 구현할 수도 있지만, vue에서 없는 함수를 사용하는 것도 찝찝하고, script가 다운받아지지 못한다면 사용할 수도 없기 때문에, gapi->nuxt/auth로 넘어왔다.

또한 nuxtjs/auth-next 모듈은 store에 auth라는 모듈을 만들어서 로그인한 사용자의 데이터를 관리해주고, cookie도 알아서 관리해주기 때문에 아주 편리하다.

loggedIn, logout, loginWith와 같은 함수도 사용할 수 있으므로 문서를 참고하길 바란다.

// Access using $auth
this.$auth.user

또는

// Access using vuex
this.$store.state.auth.user

auth API, store 사용방법: https://auth.nuxtjs.org/api/auth

 

---

!! 참고 !!

로그인 후에 redirect url을 전달해서 로그인 성공시, 해당 url로 이동하는 방식을 원하였으나, 계속 '/login' -> '/'(home) 으로만 이동하고, nuxtserverinit같은 곳에서 강제로 redirect를 해도, login이 완료되는 시점이 nuxtserverinit보다도 늦어서 결국 '/'(home)으로 이동한다. 필자는 default.vue에서 원하는 분기를 만들어내서 이동하는데.. 로그인시 원하는 곳으로 routing하는 방법을 아신다면 댓글에 남겨주시면 감사하겠습니다... (필요한 상황: 로그인해도 해당 페이지에서 벗어나지 않기, 등록되지 않은 사용자면 회원가입 페이지로 redirect)

 

추후 해당 방법에 해답을 알아낸다면 본 게시글에 추가 작성하겠습니다.