0212 : 로그인

백엔드 없이 FE단에서 필요한 로그인 구현이 목표

fake-api를 사용해 POST로 로그인을 날리고 token을 받아와 localstorage에 저장하는 것이 목표

로그인 진행 절차
1. input과 event target 이용해 사용자 입력 값 받아오기
2. useState 이용해 Id와 Pwd 값 설정
3. axios post 이용해 API 요청
4. async - await 이용한 비동기 처리
5. try-catch 이용해 API 요청 결과 처리
6. API POST 정상 - 발급된 토큰 localstorage 저장
7. API POST 에러 - alert창 에러 발생 알림
8. 로그인 성공 시 메인 페이지로 redirect

✔ 토급 발급 후 localstorage 저장

      if(res.token){
              localStorage.setItem("test-token", res.token)
          }else{
              window.alert(res.msg)
          }

✔ 로그인 성공 시 main으로 redirect

1. Link가 아닌 Redirect 사용

import { Link,Redirect } from "react-router-dom";

2. login 최초 상태 정의
   
   로그인 페이지에 들어온 사람은 당연히 로그인을 하지 않은 상태임으로 login을 false로 상태 정의

const [login,setlogin]=useState(false);

3. 로그인 POST 요청에 따른 login 상태 정의
   
   로그인 POST API 요청에 200 response을 받고 정상적으로 토큰이 발급된 경우 login을 true로 상태 정의
   이 외 다른 에러 반응에는 최초의 login 상태의 false와 동일함으로 별도의 setState를 하지 않음

//POST login 시도
      const response = await axios.post("https://fakestoreapi.com/auth/login", {
        username: Id,
        password: Pwd,
      });
      //POST 응답 성공
      console.log("✔ login token", response.data.token);

      //token 발급
      const token = response.data.token;

      //token 발급된 것 localstorage 저장
      if (token) {
        localStorage.setItem("JWT token", token);
        setlogin(true); // ‼로그인 POST 요청 성공 & 정상적 token 발급으로 true로 상태 정의‼
      } else {
        window.alert("login server Error!!!");
      }
    } catch (error) {
      //응답 실패
      console.log("✔ login error : ", error);
    }

4. login 상태에 따른 redirect 실시
   
   login이 true로 로그인이 정상적으로 처리된 경우 redirect를 사용해 메인 페이지로 이동하도록 함

  <button className="login_btn" onClick={onLogin}>
    로그인
    {login && <Redirect to="/"/>}
  </button>