[Vue.js] 토큰 기반 인증 (#7. 자동 로그인)

 

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리)

2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃)

2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인)

2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록)

2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기)

2020/07/24 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#1. 인증소개)

 

[Vue.js] 토큰 기반 인증 (#7. 자동 로그인)

개요

• 새로고침하거나 브라우저를 끄고 다시 킬때 로그아웃이 되버린다. 사용자 입장에서는 다시 로그인하는게 너무 번거롭다.
• 이번에는 자동 로그인을 하는 방법을 알아보자.

사용자 로그인 상태 체크

• 개발자도구에서 Vue 탭을 열고 Vuex에서 user state를 확인해보자.
• 이 상태에서 새고로침, 브라우저를 재실행 하게 되면 user state가 undefined로 된다.

• 다시 로그인 하는 사용자들의 불편함을 해소하기위해 로컬스토리지에 저장된 정보를 Vuex state에 사용하여 자동 로그인을 만들어 보자.

사용자 자동 로그인 구현

• created에서 로컬스토리지를 확인 후 데이터가 있으면 user state에 저장한다.
• main.js에서 구현해보자.

main.js
new Vue({
  router,
  store,
  created () {
    const userString = localStorage.getItem('user') // 로컬스토리지에서 user 데이터를 가져온다.
    if (userString) { // user 데이터가 있는지 확인한다.
      const userData = JSON.parse(userString) // 로컬스트로지는 String형으로 저장되어있으므로 parse를 사용해 객체로 변환한다.
      this.$store.commit('SET_USER_DATA', userData) // Vuex suer state에 저장하기 위해 mutation을 사용한다.
    }
  },
  render: h => h(App)
}).$mount('#app')

• 간단히 설명하면, created 훅에서 로컬스토리지에서 user 데이터를 가져와서 string을 object로 parse하고 vuex state user에 저장하는 과정이다.
• 이제 새로고침, 브라우저 재실행을 해도 로그인이 자동으로 된다.(로그인이 유지되는게 아니고 로그아웃상태였다가 사이트에 접속시에 자동 로그인이 된다.)

보안 조치 추가

• 현재 잘 작동하지만 악의적인 사용자가 로컬스토리지에 fake token key를 사용하여 접근이 가능하다.
• 여러곳에 페이지를 돌아다니면서 private API 를 요청을 할때, 요청을 intercept하여 로그아웃을 시키겠다.

import axios from 'axios';
new Vue({
  router,
  store,
  created () {
    ...
    axios.interceptors.response.use(
      response => response, // 정상이면 response를 반환
      error => {
        if (error.response.status === 401) { // 401 에러가 발생할 경우
          this.$store.dispatch('logout') // 강제로 로그아웃
        }
        return Promise.reject(error) // 에러 이유를 리턴 시켜준다.
      }
    )
  },
  render: h => h(App)
}).$mount('#app')

• 정상적인 토큰값이면 평소대로 작동(response 반환)
• 페이크 토큰값이면 server에서 에러를 반환 해준다. 에러가 발생시에는 로그아웃 시키는 로직이다.

결론

• 로컬스토리지, Vuex를 통해 자동 로그인을 구현해봤다.
• 페이크 토큰키를 감지하는 로직을 살펴보았다.

소스코드 #7 AutoLogin