20200610

스터디 내용

• axios 연결 후에 나중에 대량의 api를 만들 생각으로 api파일을 따로 두고 index.js에 axios 내용을 넣는다.
• axios 안에 DOMAIN 정보와 에러코드일 경우와 로그인으로 보내는 라우터 메소드를 만들어 준다.
  기본적인 request를 만들어 method, url, data를 받아넣고 axios에 객체처럼 값을 넣는다.
• 에러가 없으면 데이터를 보내고 에러가 뜨게된다면 에러코드를 날리거나 아니면 401 에러일경우 로그인으로 보낸다.
• 401 error : 유효한 인증 자격 증명이 없기 때문에 요청이 적용되지 않았음

import axios from 'axios'
import router from '../router'

const DOMAIN = 'http://localhost:3000'
const UNAUTHORIZED = 401
const onUnauthrorized = () => {
  router.push('/login')
}

const request = (method, url, data) => {
  return axios({
    method,
    url: DOMAIN + url,
    data
  }).then(result => result.data)
    .catch(result => {
      const { status } = result.response
      if (status === UNAUTHORIZED) return onUnauthrorized()
      throw Error(result)
    })
}

export const board = {
  fetch () {
    return request('get', 'boards')
  }
}

• 인증되지 않는 유저는 라우터에서 한번더 걸러준다.

const requireAuth = (to, form, next) => {
  const isAuth = localStorage.getItem('token')
  const loginPath = `/login?rPath=${encodeURIComponent(to.path)}`
  isAuth ? next() : next(loginPath)
}

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    beforeEnter: requireAuth
  }
]

스터디 후기

• 라우터로 토큰값(비록 로컬스토리지이지만..) 있는지 확인하여 없으면 로그인페이지 이동 -> befroeEnter 이용
• 대량의 api를 만들 수 있으므로 새로운 디렉토리 생성
• 기본적으로 데이터를 가져오는 DOMAIN을 만들고 401에 대한 에러 처리도 해준다.