[myCart] 로그인 페이지/JWT 토큰 발급과 로컬스토리지에 토큰 저장 후 홈페이지로 이동

http://localhost:5000/api/user/login

 

 

없는 비번일때

 

 

로그인 성공 시 

 

 

services에 로그인 함수 추가한다. 

export async function login(user) {

  const body = new FormData();

  body.append("email", user.email);

  body.append("password", user.password);

  await apiClient.post("/user/login", body);

}

 

 

 

 

 

LoginPage.jsx에 추가한다. 

 

 

  const [formError, setFormError] = useState("");

 

 

  //로그인 실행

  const submitData = async (formData) => {

    try {

      await login(formData);

    } catch (err) {

      setFormError(err.response.data.message);

    }

  };

        {formError && <em className="form_error">{formError}</em>}

          <button type="submit" className="search_button form_submit">

            Submit

          </button>

 

 

테스트하기

 

 

 

https://jwt.io/

JWT.IO

 

로그인을 하거나 가입시 서버에서 JWT 토큰을 발급해 주는데

이 토큰을 복사해 Encoded에 넣어보면 암호화된 토큰을  decode 풀어서 보여준다.

 

즉 name, email. 등의 유저의 정보가 담겨있고

3번째 아래쪽 시그니처는 암호화되어 있어 벡엔드에서 만든 암호화코드가 있어야 확인 가능하다.

​

로그인/가입시 서버에서는 클라이언트에게 JWT 토큰을 발행해주고

클라이언트는 이 토큰을 서버로 요청시 같이 첨부하여 인증된 유저임을 서버가 알게해서 로그인 상태를 유지한다.

서버에서는 이 토큰만 검사하면 되므로 DB를 다시 검색해 유저인지 확인할 필요가 없다.

 

토큰을 검사해서 백엔드 서버에서 발행한 토큰이 맞다고 하면 통과 큰 규모의 프로젝트에서 주로 사용

​ 

 

 

import apiClient from "../utils/api-client";

//회원가입 함수

export async function signup(user, profile) {

  const body = new FormData();

  body.append("name", user.name);

  body.append("email", user.email);

  body.append("password", user.password);

  body.append("deliveryAddress", user.deliveryAddress);

  body.append("profilePic", profile);

  //로컬스토리지 저장

  const { data } = await apiClient.post("/user/signup", body);

  localStorage.setItem("token", data.token);

}

//로그인 함수

export async function login(user) {

  //로컬스토리지 저장

  const { data } = await apiClient.post("/user/login", user);

  localStorage.setItem("token", data.token);

}

 

 

LoginPage.jsx 로그인 성공 시 기본페이지로 이동 

  //로그인 실행

  const submitData = async (formData) => {

    try {

      await login(formData);

      window.location = "/"; //로그인 후 기본 페이지로

    } catch (err) {

      setFormError(err.response.data.message);

    }

  };

 

 

 

SignupPage.jsx

  //가입하기

  //폼 입력창에 작성한 데이터 객체 formData와 이미지파일을 signup 함수에 전달한다.

  const submitData = async (formData) => {

    try {

      await signup(formData, profilePic);

      window.location = "/"; //회원가입 성공 후 기본페이지로 이동

    } catch (err) {

      setFormError(err.response.data.message);

    }

  };