Login

[JangAyeon]

setting

• [x] set Scss
• [x] reset css
• [x] set general css

  frame

• [x] analysis login page structure
• [x] set login function flow

  mark up

• [x] mark up login form
• [x] mark up loginTosignup
• [x] markup login_content

  CSS

• [x] login section
• [x] login form
• [x] login To signup

[JangAyeon]

• [ ] ERROR : 체크 박스 : 체크 해제 보안 접속 체크 박스가 디폴트로 체크되도록 checked="checked"를 속성에 넣었는데 클릭시 체크 해체가 안됨...ㅠ
• [ ] Todo : 체크 박스 체크 박스 디폴트로 체크 되었을 때 보라색 스타일링 들어가야함

[JangAyeon]

• [x] axios POST
• [x] POST response 따라 local storage 저장
• [x] 메인 페이지로 라우팅

[JangAyeon]

토급 발급 후 localstorage 저장

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

[JangAyeon]

로그인 성공 시 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>