[Vue.js] 로그인 Token 기반 인증

토큰 기반 인증이란 사용자가 자신의 아이덴티티를 확인하고 고유한 액세스 토큰을 받을 수 있는 프로토콜을 말합니다. 사용자는 토큰 유효 기간 동안 동일한 웹페이지나 앱, 혹은 그 밖에 해당 토큰으로 보호를 받는 리소스로 돌아갈 때마다 자격 증명을 다시 입력할 필요 없이 토큰이 발급된 웹사이트나 앱에 액세스할 수 있습니다.

 

인증 토큰은 도장이 찍힌 티켓과 같습니다. 토큰이 유효하다면 사용자는 계속해서 액세스할 수 있습니다. 사용자가 로그아웃하거나 앱을 종료하면 토큰도 무효화됩니다.

 

토큰 기반 인증은 비밀번호 기반 또는 서버 기반 인증 기법과는 다릅니다. 토큰이 두 번째 보안 계층을 제공하여 관리자가 각 작업과 트랜잭션을 정밀하게 제어할 수 있습니다.

 

1. Token을 서버에서 받아오기 위해서 API 통신 모듈을 구성해야합니다.

2. 로그인 Token 기반 인증을 하기 전에 먼저 Vuex 세팅을 해야한다.

3. 로그인 component 구현하기

 

Vuex는 Vue.js의 상태 관리를 위한 패턴이자 라이브러리입니다. 다른 상태 관리 패턴이나 라이브러리와 비교했을 때 뷰의 반응성(Reactivity) 체계를 효율적으로 활용하여 화면을 업데이트 한다는 차이점이 있습니다.

 

앞으로 공부할 것: Vuex 익히기

2-1. States 등록 

state는 컴포넌트 간에 공유할 data 속성을 의미한다. 

토큰을 꺼내쓰기 위해 등록해야한다.

2-2. mutations 등록

mutations은 Vuex 의 데이터, 즉 state 값을 변경하는 로직들을 의미한다.

export default {
    accessToken: ''
}

먼저, mutations에서 사용 될 변수들이 많아 질 것을 대비하여 mutations-type을 생성한 후 진행하자.

export const SET_ACCESS_TOKEN = 'SET_ACCESS_TOKEN'
...
...
...

import {
    SET_ACCESS_TOKEN
} from './mutations-types'
import api from '@/api'
import Cookies from 'js-cookie'

export default {
    [SET_ACCESS_TOKEN](state, accessToken) {
        if (accessToken) {
            state.accessToken = accessToken
            api.defaults.headers.common.Authorization = `${accessToken}`
            Cookies.set('accessToken', accessToken)
        }
    }
}

actions.js 등록

actions과 mutations은 무슨 차이가 있을까?
mutations에는 순차적인 로직들만 선언하고 actions에는 비 순차적 또는 비동기 처리 로직들을 선언한다.

import api from '@/api'
import router from '@/router'

import {
    SET_ACCESS_TOKEN
} from './mutations-types'

export default {
    login({ commit }, payload) {
        const { id, password } = payload
        return api.post('/cs/login', { id, password })
            .then(res => {
                const accessToken = res.data.body
                if (accessToken) {
                    commit(SET_ACCESS_TOKEN, accessToken)
                    router.push({ name: 'adminmain' })
                } else {
                    router.push({ name: 'login' })
                        .catch(err => {
                            if (err.name != 'NavigationDuplicated') {
                                throw err;
                            }
                        })
                }
            })
    }
}

자 이제 Vuex 세팅이 끝났으면 본격적으로 로그인 할 페이지를 구현해보자.
사용자에게 직접적으로 보여지는 폼 Component와 기능 Component 이렇게 두 가지로 구현한다.

3-1. 직접적으로 보이는 폼 

<template>
    <div class="login-content">
        <h3>로그인</h3>
        <form class="login-form" @submit.prevent="submit">
            <input type="text" v-model="id" placeholder="아이디를 입력해주세요.">
            <input type="password" v-model="password" placeholder="비밀번호를 입력해주세요.">
            <button type="submit">로그인</button>
        </form>
    </div>
</template>

<script>

export default {
    name: 'Login',
    data: () => ({
        id: '',
        password: ''
    }),
    methods: {
        submit() {
            const { id, password } = this
            this.$emit('submit', { id, password })
        }
    }
}
</script>

3-2. 기능적 폼

<template>
    <login-form @submit="onSubmit"/>
</template>

<script>
import LoginForm from '@/components/login/LoginForm'
import { mapActions } from 'vuex'

export default {
    name: 'Login',
    components: { LoginForm },
    methods: {
        onSubmit(payload) {
            this.login(payload)
        },
        ...mapActions(['login'])
    }
}
</script>