vue에서 axios 사용하기 2

저는 Vue.js와 Axios를 이렇게 사용합니다. #3. 인증토큰 다루기 - YouTube   

 

 로그인해서 받아온 토큰을 vuex에 저장해서 관리해보도록 하자!!

 

store폴더 밑에 auth.js파일을 만든 뒤 아래와 같이 설정해주자.

비동기관련코드는 action을 사용해서 사용해야하지만 이 부분은 조금 있다 리팩토링하고 일단 이렇게 넘어가자

 

먼저 auth.js에 있는 login함수를 아래와 같이 조금 바꾸었다. response.status가 200이면 state에 토큰을 저장한다!

로그인 하기 전 state를 보면 token이 null 이지만 로그인 버튼을 클릭하면 

아래와 같이 바뀌게 된다!!

이번엔 이 state에 저장된 abcd를 가지고 axios요청을 보낼 때 intercept를 사용하여 token이 state에 존재하면 이 토큰을 같이 보내주는 기능을 만들어 보자

 

import store '@/store'

아래와 같이 적어주면 요청을 보내기 전에 가로채서 토큰이있는지 확인을 한 뒤에 토큰이 state에 있으면 hader에 토큰을넣어 보내는 기능이다.

 

여기서 return을 꼭 config를 해주어야한다. 해주지 않으면 요청에 문제가 생김

로그인을 하지 않고 글을 작성해보면 아래 header에 Authorization이 없는걸 확인할 수 있다.

로그인을 한 뒤에 글을 작성해보자

잘 토큰이 적힌 것을 확인할 수 있다.

 

 

validationError

이번엔 board에서 title과 content를 적지 않으면 서버에서 받아온 오류를 화면에 보이도록 해보겠다.

먼저 data에 오류를 넣을 obj를 생성한 뒤 catch문에서 422상태를 받았다면 받은 데이터를 오류 obj에 넣어준다.

그래서 data가 변경이 되면 vue에서도 보이게 될 것이다.

 

하지만 이렇게 만들어버리면 모든 catch문에다가 일일이 상태코드가 422번인지 확인해주는 절차를 해야할 것이다.

이걸 intercepter에서 확인하고 422에러라면 state에다가 validationError를 넣어주면 될 것이다. 그리고 vue에서는 mapState를 활용하여 state에 있는 값을 가져와 template에 뿌려주면 된다.

 

먼저 store 밑에 errors.js라는 모듈을 만들어주자

그리고 index.js에서 모듈 errors를 추가해주자

 

그리고나서 인스턴스를 만들어 둔 곳에 intercepte를 지정해주자 이번엔 받아오는 것이니까 response!

첫 번째 인자에는 성공했을 경우, 두 번째 인자에는 실패했을 경우이다. 여기서 성공했을 경우에는 errors.js의 state를 빈 칸으로 만들고 반대로 실패 했을 경우 422상태코드라면 받아온 에러값을 state에 넣어주자

 

그리고 return 값을 잘 보면 Promiss.reject(err)를 리턴하는데 그냥 err만 리턴하면 이상하게 catch에서 받지않고 then에서 res로받아버리게 된다.. ( 오류인데도 불구하고 )

따라서 catch에서 err받게하려면 Promiss.reject(err)를 return해주어야 한다.