[javascript] Vue Router의 인증 처리 방법들

18 Dec 2023

javascript

Vue Router는 단일 페이지 애플리케이션 (SPA)을 구축하는 데 널리 사용되는 도구입니다. 이 글에서는 Vue Router를 사용하여 SPA에서의 사용자 인증 처리에 대해 알아보겠습니다.

1. 기본적인 라우터 보호

보안 상의 이유로 특정 라우트를 보호해야 할 때, 라우터 네비게이션 가드를 사용하여 해당 라우트로의 접근을 제어할 수 있습니다.

import router from './router'

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

2. 동적 라우트 보호

일부 라우트는 특정 사용자 권한을 요구할 수 있습니다. 이러한 경우 동적 라우트 매칭을 사용하여 라우트에 대한 접근 권한을 동적으로 관리할 수 있습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      meta: {
        requiresAuth: true,
        requiresAdmin: true
      }
    }
  ]
})

3. 인증된 사용자 리디렉션

인증된 사용자가 로그인 페이지나 회원가입 페이지에 접근할 때, 해당 사용자를 홈페이지로 리디렉션시켜주는 것이 보통의 요구사항입니다.

{
  path: '/login',
  beforeEnter: (to, from, next) => {
    if (auth.loggedIn()) {
      next('/')
    } else {
      next()
    }
  }
}

4. 다중 계층 레이아웃

다중 계층 레이아웃은 로그인한 사용자와 로그아웃한 사용자를 위한 서로 다른 레이아웃을 제공할 수 있습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    }
  ]
})

Vue Router를 사용하여 SPA에서의 인증 처리를 하는 방법들을 알아보았습니다. 사용자의 요구에 따라 적절한 방법을 선택하여 보안을 강화할 수 있습니다.

참고: Vue Router - Navigation Guards