저번 글에 이어 jwt를 활용한 회원가입 탈퇴 코드 해설에서
프론트엔드 코드들을 살펴보도록 하자
각 코드에 대한 해설은 주석으로 확인 할 수 있다.
api.js
- url 설정
가장 먼저 url 을 손쉽게 변경하기 쉽도록 편의를 위해 변수안에 base url을 넣어준다.
# api.js
const backend_base_url = "http://127.0.0.1:8000"
const frontend_base_url = "http://127.0.0.1:5500"* 프로트의 base_url을 프론트 settings.py 하단에 추가해 준다
# 백엔드 settings.py 하단.
CORS_ALLOWED_ORIGINS = [
"http://localhost:5500",
"http://127.0.0.1:5500",
]
- 로그인 기능
# api.js
async function handleSignup() {
const signupData = {
// getElementById 를 사용해 fullname, username, password 데이터를 가져온다.
fullname: document.getElementById('floatingInputFullname').value,
username: document.getElementById("floatingInput").value,
password: document.getElementById('floatingPassword').value,
}
// 가져온 데이터를 fetch를 사용해 해당 url의 headers 에 json 방식으로 넘겨운다.
const response = await fetch(`${backend_base_url}/user/`, {
headers: {
// 어떤 type으로 데이터를 보내줄지 선택한다.
Accept: "application/json",
'Content-type': 'application/json'
},
method: 'POST',
// body 에는 프론트에서 가져온 signupData 를
// stringify 를 사용해 자바스크립트의 값을 JSON 문자열로 변환한다.
body: JSON.stringify(signupData)
}
)
// response 한 데이터 또한 json 화 해주어야 한다. url에 await 걸어준것 처럼 await 를 걸어준다.
response_json = await response.json()
if (response.status == 200) {
alert('회원 가입 성공')
window.location.reload();
} else {
alert('다시 입력해 주세요')
}
}
- 회원가입 기능
# api.js
async function handleSignin() {
const loginData = {
username: document.getElementById("floatingInputSignIn").value,
password: document.getElementById('floatingPasswordSignIn').value
}
// /user/api/token/ 은 백엔드에서 jwt url이다. 모르겠다면,
// 백엔드) 회원가입 / 탈퇴 기능 구현 글 참조.
const response = await fetch(`${backend_base_url}/user/api/token/`, {
headers: {
Accept: "application/json",
'Content-type': 'application/json'
},
method: 'POST',
body: JSON.stringify(loginData)
}
)
response_json = await response.json()
if (response.status == 200) {
// response_json.access, response_json.refresh 의 데이터를 각각
// localStorage 에 access, refresh 라는 이름으로 저장한다.
localStorage.setItem("access", response_json.access)
localStorage.setItem("refresh", response_json.refresh)
// access 값 파싱 작업 / 가공 작업
// jwt 는 .으로 3가지의 값이 나우어져 있다. split('.') 을 사용해 1번째의 값을 파싱해준다.
const base64Url = response_json.access.split('.')[1];
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
const jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
// 파싱해서 바뀐 값이 저장 되어있는 jsonPayload 를 localStorage 에 payload 라는 이름으로 저장한다.
localStorage.setItem("payload", jsonPayload);
alert("로그인 성공")
window.location.replace(`${frontend_base_url}/`);
} else {
alert("일치하지 않는 아이디나 비밀번호입니다.")
}
}
이렇게 jwt 를 사용한 로그인 회원가입 기능 구현이 모두 완료되었다.
* 번외로 회원가입 / 로그인 html 코드도 참고용으로 남기겠다.
<!-- 로그인 -->
<div class="sign-in-htm margin-top-20">
<div class="group">
<label for="user" class="label">Username</label>
<input type="text" class="input" id="floatingInputSignIn" placeholder="username">
</div>
<div class="group">
<label for="pass" class="label">Password</label>
<input type="password" class="input" data-type="password" id="floatingPasswordSignIn"
placeholder="Password">
</div>
<div class="group">
<input type="submit" id="login" class="button margin-top-40" value="Sign In" onclick="handleSignin(), login()">
</div>
</div>
<!-- 회원가입 -->
<div class="sign-up-htm margin-top-20">
<div class="group">
<label for="user" class="label">Fullname</label>
<input type="text" class="input" id="floatingInputFullname" placeholder="Fullname">
</div>
<div class="group">
<label for="pass" class="label">Username</label>
<input type="text" class="input" id="floatingInput" placeholder="Username">
</div>
<div class="group">
<label for="pass" class="label">Password</label>
<input type="password" data-type="password" class="input" id="floatingPassword"
placeholder="Password">
</div>
<div class="group">
<input type="submit" class="button margin-top-20" value="Sign Up" onclick="handleSignup()">
</div>
</div>
</div>
</div>
</div>
댓글