[jwt]로그인시 get,post할 때 헤더에 토큰 첨부하기

My P·2023년 7월 17일
0
post-custom-banner

로그인 유저의 개인정보화면을 불러올 땐 어떻게 해야할까?
보통 get요청시 개별데이터의 경우 쿼리스트링으로 url에 데이터를 포함하여 받아왔다.
하지만 이 경우 개인정보가 url에 포함되므로 보안에 좋지 않다.
그리고 jwt를 사용할 경우 굳이 그럴 필요도 없다.
HTTP 요청 헤더에 인증 정보를 담아서 전송하면 된다.

async function getDetailData() {
  try {
    const token = '토큰 값';

    const headers = {
      Authorization: `Bearer ${token}`
    };

    const result = await Api.getDetail(headers);
    detailData.value = result.body.data;
    hasCommentCheck(); // 댓글 여부 검사
    ElMessage.success(result.head.message);
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
}

// Api.js
async function getDetail(id, headers) {
  const url = `/data/detail`;
  const result = await baseApi.get(url, { headers });
  return result;
}

대충 이런식으로 헤더에 토큰정보를 담아 보내면 된다.

profile
박문
post-custom-banner

0개의 댓글