ㄴ.Vue & Spring Boot: Axios 연결 연습

 

https://creon.tistory.com/581

개인적인 공부로 Vue.js + Spring boot + PostgreSQL 을 써보고 있다.

참고강의: https://youtu.be/FxT0koabbWw

1. Vue&Axios | 서버와의 통신

<package.json>
npm install axios 프로젝트 공유할떄 노드js남기고 명세나기는데 그걸 남겨주는게 --save임

  "dependencies": {
    "axios": "^0.21.1",...
}

> asios 가 저정이되었음 
> 보통 npm install 하게되면 package.json이 다운이된다.  그러고 다른거 install 할때마다 dependencies에 추가가된다.

 

2.Vue&Axios | Fake Api서버와  Postman 소개

- fake server
https://reqres.in/ 들어가면 서버요청 응답받는기능 있음 

Reqres - A hosted REST-API ready to respond to your AJAX requests

 

- postmans
ckarh https://www.postman.com/

Postman | The Collaboration Platform for API Development

> 서버통신할떄 서버에서 요청하고 결과값을 받을때 사용하는 툴
> app다운받으면 아래처럼 나오는데 Post, get등 선택해서 주소 넣을수있다.

> 주소는 reqres.in에 에 있는데 불러오고싶은 자료 get, post, put, patch, delete등 있는데 각 클릭해서 Request에 나오는 주소와 reqres.in뒤에 붙이고 Send하면 아래  body의 pretty에 데이터가 뜸.
> 보통 뒤에 파라미터 들어가지않는 로그인같은경우는 추가로 dnldml  Body / row / JSON 선택해서 붙여넣어주면 간단하게 테스트가능(위 참고)
> 테스트 방법은 이멜이나 비번 하나 빼면 아래에 error코드가 뜰것이다. 잘되면 토큰나올것임  

3. Vue&Axios | Axios를 통해 GET방식 통신하기
참고: https://github.com/axios/axios

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

- GET 방식
Example에서 Performing a GET request의 첫번째 get 내용가져오기 

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

> Login.vue 에 버튼과 함께 메서드 추가

> const 로 불러온 axios는 import로 간단하게 불러와주면됨

import axios from "axios"
//const axios = require('axios');

> 테스트를 누르면 콘솔에 값이 들어오는걸 확인할수있다. data안에 있음 

> 데이터가 들어오느 형식은 아래와같다고 나와있음

>상태코드 확인가능 번호보고 뭐가문제인지 확인할수있다.상태코드: https://ko.wikipedia.org/wiki/HTTP_%EC%83%81%ED%83%9C_%EC%BD%94%EB%93%9C

HTTP 상태 코드 - 위키백과, 우리 모두의 백과사전

• 200(성공): 서버가 요청을 제대로 처리했다는 뜻이다. 이는 주로 서버가 요청한 페이지를 제공했다는 의미로 쓰인다.

> then()코드는 항상 실행이되도록하여 콘솔에  test가 뜨고 

      .then(() => { 
        console.log("test")
        // always executed  
      })

> 에러를 만들어주면 아래처럼 404 에러가 뜨는것도 확인할수있다

4. Vue&Axios | Axios를 통해 POST방식 통신하기

- POST 방식
Example에서 Performing a POST request의 첫번째 post 내용가져오기

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

> 토큰을 받아오는걸 확인할수있고 비번을 삭제하면 400에러도 뜨는걸 확인할수있다

> post 주소와 email, password를 지정해준다

    postTest() {
      axios.post('https://reqres.in/api/register', {
      email: "eve.holt@reqres.in",
      password: "pistol"
      })
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
    }

> 차이: 겟방식은 주소를 하나만 입력하면되고 포스트는 뒤에 콤마를 붙여서 오브젝트로 바디를 담아서 보내게된다.

 

6. Vue&Axios | 헤더에 토큰 담아 보내기

> 차이: 겟방식은 주소를 하나만 입력하면되고 포스트는 뒤에 콤마를 붙여서 오브젝트로 바디를 담아서 보내게된다.
로그인버튼클릭시 이멜패스가같이들어오고 로그인호스트로 파람같이보내고 성고시 다시 토큰 이용해 유저정보 이용하고 (토큰이용)  그 토큰을 허용하여 겟으로 유저인포를 가져와 커믿을 해주게된다. 커밋에 바로 data.data해줄수도있지만 협업시 개별적으로 적은게 도움이됨

actions: {
    //로그인 시도
    login({ commit }, loginObj) {
      axios
      .post('https://reqres.in/api/login', loginObj) //차람으로 바디를 가져옴
      .then(res => {
        console.log(res)
        //성공시 token": 블라블라 (실제로는 user_id값을 받아옴)
        //토큰을 헤더에 포함시켜서 유저 정보를 요청
        let token = res.data.token
        let config = {
          headers: {
            "access-token": token //토큰 res에서 받아온 데이터의 토큰을 받아옴 / 개발자확인하면 data안에 data에 결과값이 들어가있음
          }
        }
        axios //해더에 토큰을 넣어주기위해 axios한번더 get방식으로 요청한다
        .get('https://reqres.in/api/users/2', config) //보안과관련된 config헤더값설정하고 포함시키기위해 토큰 내용이있음
        //res같이 해주면 에러날수있으니 이름다르게 response로 지정해줌
        .then(response => {
          //그 데이터안의 데이터의 결과값을 가져와 참고할수있다
          // avatar: "https://reqres.in/img/faces/2-image.jpg"
          // email: "janet.weaver@reqres.in"
          // first_name: "Janet"
          // id: 2
          // last_name: "Weaver"

          let userInfo = { //처음 데이터는 아시오스 두번째는 서버데이터
            avatar: response.data.data.avatar,
            email: response.data.data.email,
            first_name: response.data.data.first_name,
            id: response.data.data.id,
            last_name: response.data.data.last_name
            // 뮤테이션실행을 위해 커믿해줌
          }
          commit('loginSuccess', userInfo)
        })
        .catch(() => {
         // console.log(error)
        alert("이메일과 비밀번호를 확인학세요.")
        })
       //console.log(res)
      })
      .catch(() => {
        //console.log(err)
        alert("이메일과 비밀번호를 확인학세요.")
      })
    }
  },

> 데이터 안의 데이터 불러올것임 = 아이디안에 개인정보

> 아이디안에 개인정보불러옴

> 그러나 Headers안에서는 access-token이 안뜸. 

> 이것 확인하기위해서는  Network로가서 2선택후 Request Headers를 선택하면 access-token확인가능

> 로그인이되면 이렇게 페이지가 로드되고 이름은 지정안해줘서 그런거기에 다시 값을 제대로 주면된다.

<Mypage.vue>

    <h1>{{ userInfo.first_name }} {{ userInfo.last_name }}님 환영합니다.</h1>

> 아래 결과 제대로 출력된다>

> 또한 스테이트값이 어떻게 변하는지 보고싶을때 : 베이스스테이트먼트는 실행시 스테이트먼트 값 볼수있고 로그인 석세스는 뮤테이션이되어 로그인되었을때 값을 볼수있다. 로그아웃되면 또 뮤테이션 추가되고  값의 확인할수있다