function Modallogin() {
  const modal = useSelector(state => state.modal);
  const dispatch = useDispatch();
  const getCookie = Cookies.get('token');
  const navigate = useNavigate();

  useEffect(() => {
    if (getCookie) {
    }
  }, [getCookie]);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onValid = async data => {
    const loginInfo = {
      username: data.id,
      password: data.password,
    };
    try {
      const response = await axios.post(
        '123123123/api/user/login',
        loginInfo
      );
      console.log(response.data); // 응답 데이터 출력
      const token = response.data.token; // 응답 데이터에서 token 값을 추출
      alert('로그인에 성공하여 정상적으로 토큰이 발급 되었습니다.');
      // 토큰을 쿠키에 저장
      Cookies.set('token', token, { expires: 7 });
      // API 요청을 위한 헤더 설정
      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    } catch (error) {
      alert(error.response.data.message);
    }
  };

 token	undefined	localhost	/	2023-08-10T01:41:24.000Z	14					Medium

로그인 후 애플리케이션 탭의 쿠키 에서는 위와 같은 결과가 표시됩니다.

그리고 로그인 후 네트워크 - 페이로드 에서 헤더의 값은 토큰이 잘 넘어오는 것을 확인했습니다

Access-Control-Allow-Credentials:

true

Access-Control-Allow-Origin:

http://localhost:3000

Authorization: ABCDEFG

Authorization-Refresh: ABCDEFG

0개의 답변

Q&A 목록