로그인/회원가입 백엔드와 연결하기

Seri Park·2021년 4월 17일
0

회원가입절차

< 내가 쓴 코드 >

 constructor() {
    super();
    this.state = {
      name: '',
      id: '',
      password: '',
      emailAccount: '',
      emailWebsite: '',
      firstNumber: '010',
      secondNumber: '',
      lastNumber: '',
      dateBirth: '',
    };
  }

이렇게 state를 setting 해두고 select tag를 썼던 first number는 010으로 초기화를 해두고
이메일과 전화번호를 백엔드로 보낼 때 붙여주는 방식으로 했다

goToLogin = e => {
    e.preventDefault();
    fetch('http://10.58.7.158:8000/members/signup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        account: this.state.id,
        password: this.state.password,
        email: `${this.state.emailAccount}@${this.state.emailWebsite}`,
        name: this.state.name,
        date_birth: this.state.dateBirth,
        phone_number:
          this.state.firstNumber +
          this.state.secondNumber +
          this.state.lastNumber,
      }),
    })
      .then(response => response.json())
      .then(result => {
        if (result.message === 'SUCCESS') {
          alert('success');
          this.props.history.push('/login');
        }
      });
  };

서버에 저장해두어야 할 정보를 보내주는 거니까 method는 POST.
method 에는
첫번째 (서버와 클라이언트의 핑퐁 방식) --> POST라는 방식을 통해 정보를 request하고 그에 대한 response를 서버로 부터 받는 방법 과
두번째 (백엔드가 일방적으로 데이터를 보내는 방식) --> 화면상 비워져있는 공간에 render 해야할 data ( 화면에 뿌릴 데이터)를 백엔드로부터 GET이라는 메소드로 받아오는 방법이 있다.
지금 회원가입은 서버에 저장해두어야 할 회원 정보를 서버에 보내주는 거니까 method는 POST.

데이터를 프론트와 백엔드끼리 주고받을 때 JSON(백엔드와 프론트엔드가 소통할 때 쓰는 포맷)형태로 주고 받게되는데
프론트에선 객체 형태를 제이슨으로 바꿔줘야 한다. (오브젝트를 스트링 형태로 바꾸는 것이 바로json이다 ) => JSON.stringify

headers에 들어가는 content-type이 json형식이라는 정보. 나중에 장바구니 혹은 회원의 개인적인 정보가 모여있는 페이지로 이동하는 경우
백엔드에 API요청을 할 때 누구인지에 대한 정보(access token)를 headers에 담아서 요청해야한다.
http 통신 (FE-BE 통신)은 Stateless라서 상태를 저장하지 않기 때문에 직접적으로 id와 pw값으로 소통하지 않고 access token을 가지고 소통해야한다.
사용자가 로그인 후 다른 페이지로 갈 경우, ( http 통신은 상태를 저장하지 않기 때문에) 새로운 페이지에서는 사용자가 누구인지 전혀 모른다.
그렇기 때문에 access token이 없다면 새로운 엔드포인트 진입 때마다 사용자는 로그인을 다시 해 줘야 한다.
백엔드가 API를 만들지만 호출하는 주체는 프론트엔드이기 때문에 백엔드에서 제대로 된 결과값을 리턴해 주기 위해서는
사용자 권한 정보가 담겨져 있는 access token가 필요한 것이다.

로그인 절차

1.회원가입을 하여 유저 아이디와 비번을 유저가 input에 입력
2. 서버측에서 유저의 비번을 암호화 해서 DB에 저장.
4. 유저가 input 입력한 값이 onclick함수로 setState해주어 빈 배열에 입력값을 받는다. 입력값을 서버에 보내면 DB에 저정된 유저정보와 비교.
5. 일치하면 로그인 성공
6. 로그인 성공하면 서버측은 access token을 클라이언트에게 전송.
7. 유저는 로그인 성공후 다음부터는 access token을 첨부해서 request를 서버에 전송함으로서 API호출이 필요할 때 매번 로그인 해도 되지 않도록 한다.

< 내가 쓴 코드 >

constructor() {
    super();
    this.state = {
      id: '',
      pw: '',
      click: 'false',
    };
  }
handleLoginInput = e => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

위와 같이 input에 들어오는 target의 value를 비구조화 할당을 하고 e.target.name으로서 input의 name 으로 각각 다르게 지정한 key값에 접근하여 key에 대한 value를 가져오는 방식.

 goToMain = e => {
    e.preventDefault();
    fetch('http://10.58.1.218:8000/members/signin', {
      method: 'POST',
      body: JSON.stringify({
        account: this.state.id,
        password: this.state.pw,
      }),
    })
      .then(response => response.json())
      .then(res => {
        if (res.Token) {
          localStorage.setItem('Token', res.Token);
          this.props.history.push('/');
        }
      });
  };

이번엔 비구조화 할당을 하지 않고 KEY: this.state.id 혹은 this.state.pw라고 다 작성한 버전
.then 코드를 보면 res.Token( 백에서 어떤식으로 토큰이름을 저장했는지 보고 일치시킴) 이 true라면 (토큰이 존재한다면)
로컬스토리지에 setItem으로 저장한 후에 this.props.history.push를 통해 로그인페이지로 이동시킨다.

profile
front-end developer. key= "consistency"

0개의 댓글