Vue 애플리케이션을 개발할 때 다양한 라우팅 요구사항이 생기는데, 그 중 하나는 사용자의 로그인 상태를 관리하고 라우팅을 인증된 사용자만 허용하는 것입니다. Vue Router를 사용하면 이러한 인증을 간편하게 처리할 수 있습니다. 이 기사에서는 Vue Router를 사용하여 사용자의 인증 상태를 유지하는 방법을 살펴보겠습니다.

Vue Router란?

Vue Router는 Vue.js 애플리케이션에서 사용되는 공식 라우팅 라이브러리로, 페이지 간의 이동 및 URL에 따른 컴포넌트 표시를 관리합니다. Vue Router를 사용하면 애플리케이션의 라우팅을 간편하게 설정하고, 중첩된 레이아웃과 뷰, 코드 분할, 전역 네비게이션 가드 등의 기능을 활용할 수 있습니다.

로그인 상태를 관리하는 방법

Vue Router를 사용하면 로그인한 사용자만 접근이 가능한 페이지를 간단하게 설정할 수 있습니다. beforeEnter 내비게이션 가드를 사용하여 라우팅을 설정할 수 있습니다.

다음 예제는 사용자가 로그인하지 않은 경우, 로그인 페이지로 리다이렉트하는 내비게이션 가드의 예제입니다.

const router = new VueRouter({
  routes: [
    { 
      path: '/dashboard', 
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        if (!auth.loggedIn()) {
          next('/login');
        } else {
          next();
        }
      }
    },
    { 
      path: '/login', 
      component: Login
    }
  ]
});

위의 코드에서 /dashboard 라우트에 beforeEnter 내비게이션 가드를 사용하여 로그인 상태를 확인하고, 로그인하지 않은 경우 /login 페이지로 리다이렉트합니다.

사용자의 인증 상태 유지하기

사용자의 로그인 상태를 유지하는 방법은 다양하게 있지만, 대부분의 경우 로컬 스토리지를 사용하여 토큰이나 사용자 정보를 저장하는 방식을 많이 사용합니다. 이를 통해 페이지 새로고침이나 브라우저를 닫았다가 다시 열었을 때에도 인증 상태를 유지할 수 있습니다.

다음은 사용자의 로그인 상태를 로컬 스토리지에 저장하고, 로그아웃할 때 해당 정보를 삭제하는 예제입니다.

// 로그인 성공 시
localStorage.setItem('userToken', token);

// 로그아웃 시
localStorage.removeItem('userToken');

위의 예제에서 userToken은 로그인 성공 시 발급된 사용자 토큰을 가리킵니다. 이 토큰을 사용하여 사용자의 인증 상태를 관리하고, 로컬 스토리지에 저장하여 유지합니다.

이제 Vue Router를 사용하여 사용자의 로그인 상태를 확인하고 관리하는 방법에 대해 살펴보았습니다. 이를 활용하여 인증이 필요한 페이지를 간단히 설정하고, 사용자의 로그인 상태를 유지할 수 있을 것입니다.

이 기사는 Vue Router 공식 문서를 참고하여 작성되었습니다.