[Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리)

 

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] 토큰 기반 인증(#6. 에러 처리)

 

 

개요

• 사용자 가입(register), 로그인(login)시 발생하는 에러에 대해 다룬다.
  • 유효하지 않은 자격(credentials)를 입력(예를 들면, 잘못된 비밀번호)할 경우 - 로그인시
  • 사용자가 가입할때(이미 등록된 이메일, 유효하지 않은 비밀번호 규칙) - 가입시

서버단 이해하기

• 서버에서 어떻게 동작하는지 알면 프론트엔드 Vue에서 알맞게 대처가 가능하다.
• 서버에서 사용자의 credentials이 DB에 저장된 정보인지 확인해야 된다.
• 하지만, 우리는 Mock Data Server이므로 1개의 정보가 저장되어있으므로, 확인하기가 쉽다.
• 만약 확인이 되지 않는 credentials이면 401 상태 코드를 반환해준다.

server /login endpoint

app.post('/login', (req, res) => {
  const userDB = fs.readFileSync('./db/user.json') // db 읽기
  const userInfo = JSON.parse(userDB)
  if ( // db에 사용자 정보가 있는지 확인
    req.body &&
    req.body.email === userInfo.email &&
    req.body.password === userInfo.password
  ) {
    const token = jwt.sign({ userInfo }, 'the_secret_key')
    res.json({
      token,
      email: userInfo.email,
      name: userInfo.name
    })
  } else {
    res.status(401).json({ error: 'Invalid login. Please try again.'}) // 사용자 정보가 없으면 에러를 보내준다.
  }
})

server /register endpoint

• 같은 이메일로 여러개 중복 가입은 할 수 없다.
• 비밀번호 규칙을 만들어 보안을 높힌다.
• 실제 서비스에서는 validation libarary를 사용하여 비밀번호 규칙을 만들지만, 여기서는 간단하게 작업을 한다.

app.post('/register', (req, res) => {
  ...
  const errorsToSend = [] // 에러 수집하는 배열

  if (dbUserEmail === user.email) { // db에 이메일 있는지 확인
    errorsToSend.push('An account with this email already exists.')
  }
  if (user.password.length < 5) { // 비밀번호 규칙에 맞는지 확인
    errorsToSend.push('Password too short.')
  }
  if (errorsToSend.length > 0) { // 에러가 있는지 확인
    res.status(400).json({ errors: errorsToSend }) // 에러가 있으면 보내준다
  } else {
    // 성공 로직
  }
  ...
})

• 이제 서버에서 할일을 다 체크했으니 Vue app에서 에러를 다루는 법을 살펴보자

로그인(login) 에러 다루기

• LoginUser 컴포넌트에 에러를 잡는 catch를 추가한다.
• error data property를 만든다.

src/views/LoginUser.vue
<template>
  ...
  <p>{{ error }}</p>
  ...
</template>

<script>
  data () {
      return {
        ...
        error: null
      }
  },
  methods: {
    login () {
      this.$store
        .dispatch('login', {
        email: this.email,
        password: this.password
      })
        .then(() => {
          this.$router.push({ name: 'dashboard' })
      })
        .catch(err => 
          this.error = err.response.data.error
      })
    }
  }
</script>

로그인 에러 표시

가입(register) 에러 다루기

• 로그인 에러랑 똑같다.
• 대신 에러가 2개 발생할 수 있으니 v-for를 이용해 보여주자.

src/views/RegisterUser.vue
<template>
    ...
    <ul>
      <li v-for="(error, index) in errors" :key="index">
        {{ error }}
      </li>
    </ul>
    ...
</template>
<script>
    export default {
      data () {
        return {
          ...
          errors: null
        }
      },
      methods: {
        register () {
          ...
            .catch(err => {
              this.errors = err.response.data.errors
            })
        }
      }
    }
</script>

회원가입 에러표시

결론

• catch를 사용해 에러를 잡아내서 화면에 보여줬다.
• 서버에서 validation 처리를 했지만 클라이언트에서도 가능하다.
• 다음에는 자동 로그인에 대해 알아보겠다.

소스코드 : Error Handling