[javascript] Vue Router에서 로그인 페이지 전환

18 Dec 2023

javascript

Vue.js 애플리케이션을 개발하다 보면 사용자가 로그인하거나 로그아웃할 때 라우팅을 제어해야 할 때가 있습니다. Vue Router를 사용하여 로그인 페이지로 전환하는 방법을 알아봅시다.

Vue Router 설정

Vue Router를 사용하려면 먼저 Vue 프로젝트에 Vue Router를 설치하고 설정해야 합니다. vue-router 패키지를 설치한 후 main.js 파일에서 다음과 같이 Vue Router를 설정합니다.

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/login', component: Login },
  { path: '/home', component: Home }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

위 코드에서는 /login 경로와 /home 경로에 각각 Login과 Home 컴포넌트를 매핑하고 있습니다.

로그인 상태 확인

로그인 페이지로 전환하기 전에 먼저 사용자의 로그인 상태를 확인해야 합니다. Vuex나 로컬 스토리지를 사용하여 사용자의 인증 상태를 저장하고 확인할 수 있습니다.

// store.js
const store = {
  state: {
    isAuthenticated: false
  }
  //...
}

로그인 페이지로 전환

이제 사용자의 로그인 상태를 확인한 후 로그인 페이지로 전환할 수 있습니다. 이를 위해 Vue Router의 네비게이션 가드를 사용합니다.

// main.js
router.beforeEach((to, from, next) => {
  if (to.path !== '/login' && !store.state.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

위 코드는 사용자가 로그인하지 않았고, 로그인 페이지 외의 다른 페이지로 이동하려고 할 때 자동으로 로그인 페이지(/login)로 전환됩니다.

이제 Vue Router를 사용하여 로그인 페이지로 전환하는 방법을 알게 되었습니다. 사용자의 인증 상태를 확인하고 네비게이션 가드를 사용하여 페이지 전환을 제어할 수 있습니다.

Vue Router 설정

로그인 상태 확인

로그인 페이지로 전환

참고 자료