[javascript] Vue.js에서의 사용자 인증 처리 방법

01 Dec 2023

javascript

Vue.js는 사용자 인터페이스를 개발하기 위한 프레임워크로 많이 사용되며, 웹 애플리케이션에서 사용자 인증 처리를 구현하는 데도 매우 유용합니다. 이번 포스트에서는 Vue.js에서 사용자 인증 처리를 구현하는 방법에 대해 알아보겠습니다.

사용자 인증 처리의 필요성

웹 애플리케이션에서 사용자 인증은 매우 중요한 요소입니다. 사용자 인증을 통해 애플리케이션의 보안을 유지하고 민감한 정보에 대한 접근을 제한할 수 있습니다. Vue.js를 사용하면 SPA(Single Page Application)를 개발할 수 있으므로, 인증 절차가 필요한 페이지에서도 빠르고 자연스럽게 사용자 인증 처리를 구현할 수 있습니다.

사용자 인증 처리 구현하기

1. 로그인 페이지 작성하기

먼저, 사용자의 아이디와 비밀번호를 입력할 수 있는 로그인 페이지를 작성해야 합니다. 이 페이지에서 사용자는 자신의 인증 정보를 입력하고 “로그인” 버튼을 클릭하여 인증을 요청할 수 있어야 합니다.

<template>
  <div>
    <input type="text" v-model="username" placeholder="사용자 아이디">
    <input type="password" v-model="password" placeholder="비밀번호">
    <button @click="login">로그인</button>
  </div>
</template>

2. 인증 로직 구현하기

로그인 페이지에서 “로그인” 버튼을 클릭하면, 입력한 아이디와 비밀번호를 서버로 전송하여 인증을 요청해야 합니다. Vue.js에서는 axios 등의 HTTP 라이브러리를 사용하여 서버와의 통신을 처리할 수 있습니다.

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      .then(response => {
        // 인증 성공 시, 토큰 등의 인증 정보를 저장하고 다음 페이지로 이동
      })
      .catch(error => {
        // 인증 실패 시, 에러 처리
      });
    }
  }
}
</script>

3. 인증 정보 저장하기

서버로부터 인증이 성공하면, 인증 정보를 클라이언트에 저장해야 합니다. Vue.js에서는 localStorage 등의 웹 스토리지를 사용하여 인증 정보를 저장할 수 있습니다.

login() {
  axios.post('/api/login', {
    username: this.username,
    password: this.password
  })
  .then(response => {
    localStorage.setItem('token', response.data.token);
    // 다음 페이지로 이동
  })
  .catch(error => {
    // 에러 처리
  });
}

4. 인증된 사용자만 접근 가능한 페이지 보호하기

인증된 사용자만 접근 가능한 페이지를 보호하기 위해, Vue.js에서는 라우터를 사용할 수 있습니다. 라우터를 설정하여 인증되지 않은 사용자가 접근하려는 페이지로 이동하는 것을 막을 수 있습니다.

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import Profile from '@/views/Profile.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: {
        requiresAuth: true // 인증이 필요한 페이지
      }
    }
  ]
});

// 라우터 가드 설정
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !localStorage.getItem('token')) {
    // 인증이 필요한 페이지에 인증되지 않은 사용자가 접근하려고 할 때,
    // 로그인 페이지로 이동
    next('/login');
  } else {
    next();
  }
});

export default router;

위와 같이 라우터를 설정하면, /profile 경로의 페이지는 인증이 필요한 페이지로 설정되며, 인증되지 않은 사용자가 접근하려고 할 때 자동으로 /login 경로로 리다이렉트됩니다.

마무리

위에서 소개한 방법은 Vue.js를 사용하여 간단히 사용자 인증 처리를 구현하는 방법입니다. 사용자 인증은 보안적인 측면에서 매우 중요하며, 실제 개발 시 보다 복잡한 로직과 추가적인 보안 기능을 구현해야 할 수도 있습니다. 이를 위해서는 서버 측 로직과 데이터베이스 등의 인증 시스템을 함께 고려해야 합니다. 최종적으로, 사용자의 인증을 효과적으로 관리하고 보호하기 위해서는 보안 전문가의 조언을 구하는 것이 좋습니다.