[javascript] Vue Router와 서버 인증 토큰 처리

18 Dec 2023

javascript

Vue.js를 이용하여 웹 애플리케이션을 개발하다 보면, 서버로부터 발급받은 인증 토큰을 Vue Router와 함께 사용하여 인증된 사용자만이 접근할 수 있는 라우트를 처리해야 하는 상황이 발생합니다. 여기에서는 Vue Router를 사용하여 인증된 사용자만이 접근할 수 있는 페이지를 구현하는 방법을 살펴보겠습니다.

Vue Router 설정

Vue Router를 사용하여 특정 라우트에 접근 권한을 설정하기 위해서는 beforeEnter를 이용하거나 각 라우트의 meta 필드를 활용할 수 있습니다. 여기에서는 각 라우트의 meta 필드를 사용하여 인증이 필요한 라우트를 정의하는 방법을 살펴보겠습니다.

// router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Dashboard from '../views/Dashboard.vue';
import Login from '../views/Login.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: { requiresAuth: true } // 이 라우트에 접근하기 위해서는 인증이 필요함
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

위의 코드에서 /dashboard 라우트에 meta: { requiresAuth: true }를 추가하여 인증이 필요한 라우트로 지정해 주었습니다.

서버 인증 토큰 처리

서버로부터 발급받은 인증 토큰은 일반적으로 HTTP 요청의 Header나 Cookie에 포함되어 전송됩니다. Vue 애플리케이션에서는 이 토큰을 저장하고 관리하기 위해 Vuex나 Local Storage를 이용할 수 있습니다.

// auth.js

export const setAuthToken = (token) => {
  localStorage.setItem('token', token);
};

export const getAuthToken = () => {
  return localStorage.getItem('token');
};

export const removeAuthToken = () => {
  localStorage.removeItem('token');
};

위의 코드는 인증 토큰을 localStorage에 저장하고 관리하기 위한 간단한 유틸리티 함수 예시입니다.

라우트 네비게이션 가드

마지막으로, 라우트 네비게이션 가드를 사용하여 라우트에 접근할 때마다 인증 토큰의 유효성을 검사할 수 있습니다.

// router/index.js

import router from './index';
import { getAuthToken } from '../auth.js';

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

export default router;

위의 코드에서 router.beforeEach를 사용하여 인증이 필요한 라우트에 접근할 때 인증 토큰의 유효성을 검사하고, 인증되지 않은 경우 로그인 페이지로 리다이렉트하도록 설정하였습니다.

이제 Vue Router와 서버 인증 토큰을 함께 사용하여 인증된 사용자만이 접근할 수 있는 페이지를 구현할 수 있습니다. 이를 통해 클라이언트 측에서도 안전하고 효율적인 사용자 인증 및 권한 부여를 구현할 수 있습니다.

Vue Router 설정

서버 인증 토큰 처리

라우트 네비게이션 가드

참고 자료