Nuxt middleware 활용해 특정 페이지 진입시 로그인 확인 처리

 

// middleware/auth.js

import { useAuthStore } from '~/store/auth.js';
export default defineNuxtRouteMiddleware((to, from) => {
	const useAuth = useAuthStore();

	const isLoggedIn = useAuth.user !== null;

	if (!isLoggedIn) {
		return navigateTo('/login');
	}
});

 

//page.vue

<script setup>
//...

definePageMeta({
	middleware: 'auth',
});

//...
</script>

 

 

로그인 체크를 원하는 페이지 (로그인 해야만 접근 가능한 페이지)에 auth라는 middleware를 사용해주면 됩니다.

 

위 코드에서는 isLoggedIn 이라는 변수로 체크해서 로그인이 안된 경우 navigateTo를 통해 로그인 페이지로 redirect 해줍니다.

 

여기서 이제 이 글의 작성 이유가 나옵니다.

 

로그인 페이지로 보내는 방법은 위 방법으로 성공했지만, 로그인 페이지에서 로그인 했을 때 내가 이동하려고 했던 페이지로 다시 보내주고 싶었는데 그 방법을 이것저것 해보다가 찾아서 기록 겸 글을 작성하게 되었습니다.

 

우선 코드먼저 보겠습니다!

 

 

// login.vue

<script setup>
//...

import { useRouter, useRoute } from 'vue-router';

const router = uesRouter();
const route = useRoute();

const handlerClickLoginButton = () => {
	// login처리
    // ...
    
    if(route.redirectedFrom === undefined) return router.replace('/');
    else return router.replace(route.redirectedFrom.fullPath);
}

//...
</script>

 

여기서 중요한 부분은 handlerClickLoginButton 함수 안쪽에 있는 코드입니다.

 

useRoute의 내부에 redirectedFrom 이라는 변수가 있습니다.

 

해당 변수는 제가 이 페이지로 오기 전에 어떤 페이지를 통해서 왔는지에 대한 정보가 담겨있습니다.

 

제가 /user/mypage 라는 페이지에 접근했는데, 거기서 login 페이지로 redirect 되었다면 redirectedFrom.fullPath = '/user/mypage'가 되겠죠 ?!

 

근데 바로 로그인 페이지로 접근하거나, 해당 정보가 없는 경우에는 redirectedFrom이 undefined로 기본 값이 선언되기 때문에 분기처리를 해주었습니다.

 

이렇게 해서 로그인이 완료되면 제가 접근하고 싶었던 페이지로 바로 이동시킬 수 있게 되었습니다.

 

router.replace를 사용한 이유는! 로그인 하고나서 페이지 이동 이후에 뒤로가기 클릭 시 로그인페이지로 다시 이동되는 현상을 방지하기 위해 사용하였습니다. 이 부분도 참고해주세요!

 

 

* 혹시 잘못된 내용이나 더 좋은 방법이 있는 경우 댓글 언제나 환영입니다! 감사합니다 :)