drf front와 연결시키기
- 회원가입
signup.html
...
<script src="api.js"></script>
...
<body>
<h1>회원가입 페이지</h1>
<form>
<input type="email" id="email" name="email" placeholder="email" />
<input type="password" id="password" name="password" placeholder="password" />
<button type="button" onclick="handleSignin()">제출</button>
</form>
</body>
...email과 password의 id값을 지정해주고
버튼의 onclick를 이용하여 클릭 시 함수가 작동하게 한다.
<작동하는 함수>
async function handleSignin(){
const email = document.getElementById("email").value
const password = document.getElementById("password").value
const response = await fetch('http://127.0.0.1:8000/users/signup/', {
headers: {
'content-type':'application/json',
},
method:'POST',
body: JSON.stringify({
"email": email,
"password": password
})
})
}document는 html(signup.html)을 의미한다. id 값이 "email","password"인 값을 가져오고, response함수에서 fetch를 이용해 백엔드에서 구축해 놓은 곳으로 보낸다. json 타입으로 POST로 보내 저장한다.
2,3번째 줄의 .value 필수.
- 로그인
api.js
async function handleLogin(){
const email = document.getElementById("email").value
const password = document.getElementById("password").value
const response = await fetch('http://127.0.0.1:8000/users/api/token/', {
headers: {
'content-type':'application/json',
},
method:'POST',
body: JSON.stringify({
"email": email,
"password": password
})
})
const response_json = await response.json()
localStorage.setItem("access", response_json.access);
localStorage.setItem("refresh", response_json.refresh);
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(''));
localStorage.setItem("payload",jsonPayload);
}response를 json형태로 변화시켜야 함.
그리고 나서 localstorage에 저장하여 로그인.
localStorage.setItem("access", response_json.access);
access는 key값 (지정가능), 뒤는 json화 시킨 response의 access값(response에서 추출된 값 중 선택)
아래는 강의로 복붙하여 모르겠음..
payload를 저장시키기 위한 함수들...
어찌저찌 payload도 localstorage에 저장!
- Mock
async function handleMock(){
const response = await fetch('http://127.0.0.1:8000/users/mock/', {
headers: {
"Authorization":"Bearer " + localStorage.getItem("access")
},
method:'GET',
})
}mock는 버튼을 만들어서 get방식으로 구현.
- 로그아웃
async function handleLogout(){
localStorage.removeItem("access");
localStorage.removeItem("refresh");
localStorage.removeItem("payload");
}localstorage를 삭제하는 것으로 로그아웃 구현.
가보자고