인증 API (로그인 페이지 개발)

 

 

curl -X POST localhost:3000/login -d 'email=test@test.com&password=123123'

curl -X POST localhost:3000/login -d 'email=test@test.com&password=123123' -vs | jq

json형식으로 토큰값을 알아 낼 수 있음.

 

 

API 에서 사용되는 토큰 정보는 클라이언트(브라우저)측에서 저장이 필요하다.

로그인 정보를 LocalStorage에서 저장하고, 로그아웃을하면 삭제하는 방식.

 

모든페이지에서 적용 할 수 없으니 라우터 로직을 사용하도록 네비게이션에 함수를 만든다.

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

navigation.js

 

 

로컬스토리지에 토큰이 있는지 없는지 체크 (isAuth라는 결과값을 저장)

토큰 정보가 있으면, 문자열이 저장됨.

loginPath를 로그인 페이지에 갔다가 현재 페이지로 저장 다시 돌아와야하기 때문에 리다이렉트로 돌아와야하기때문에

퀴리 문자열이기때문에 encodeURIComponent라는 변경해주어야한다.

토큰값이 있으면 next함수를 호출, 그렇지 않으면 loginPath로 경로 이동.

 

export const setAuthInHeader = token => {
    // 토큰정보를 받아서 axios에 request를 날리기 전에 header에 토크값 셋팅하기
	axios.defaults.headers.common['Authorization'] = token ? `Bearer ${token}` : null;
}

api.js

 

import {setAuthInHeader} from '../API'

isAuth(){
	return !!localStorage.getItem('token')
}

logout(){
	delete localStorage.token
    setAuthInHeader(null)
}

적용할 페이지에 함수 넣기