아직 3주차 11강이지만... 안타깝게도 상대적으로 수강 진도가 빠른 편이지만, 당장 금요일 10시 과제 발제인데, 어질어질 하다...

오늘의 학습 키워드

1. AbstractBaseUser와 BaseUserManager
2. Users 앱의 signup, login 기능
3. drf에서 권한 설정(permissions, 로그인 권한)
4. refresh token으로 access token 재발급
5. 프론트엔드와 벡엔드의 통신 만들기(Fetch API)

이것만은 기억하자

1. AbstractBaseUser 를 쓰기 위해선, BaseUserManager도 꼭 함께 있어야 한다!

2. Users 앱의 signup, login 기능

• view에서 APIView, status, Response import 한 후, CBV로 class UserView 만들기
• 회원가입 (method: post)
• serializers.py 파일 생성
• serializer에 비밀번호 해싱을 따로 넣어야 됨 user.set_password(password)
  - 비밀번호 해싱 자체로는 DB에 연결되지 않아 DB에 해싱된 비밀번호가 들어가지 않음.
  - user.save() -> DB에 전달하고 마무리하기 위한 save

signup 기능 구현 로직

urls.py

• signup 만들고
  views.py
• def post → 회원가입
• serializer = UserSerializer(data= request.data)
• 포스트맨에서 json형태로 보낸 걸 읽어들여서
  serializer.py
• json 형태로 가져온 걸 serializer에 보냄
• 기본으로 들어간 create 함수에 override를 해줘서, 그냥 password를 만들지 말고 user.set_password(password) 명령어를 통해 해싱 패스워드로 만들어달라고 명령함!
• 그래서 user.save() → DB에 저장
  views.py
• response로 가입완료 됐다고 뜨고, status 는 created 201로 표시됨.

3. drf에서 권한설정

from rest_framework import permissions

class mockView(APIView):
    permission_classes = [permissions.IsAuthenticated] # 어떤 것들이 되는지 지정을 해줘야하는데, 그를 위해선 rest_framework의 permissions를 임포트해야됨.
    def get(self, request):
        return Response("get 요청!")

path('mock/', views.mockView.as_view(), name="mock_view"),

postman에서 get 요청으로 Headers에 Key: Authorization, value: Bearer (access token) 입력해서 send 하면...
로그인된 상태여야만 보이게 한 response가 뜬다!

4. refresh token으로 access token 재발급

urls.py에 /api/token/refresh/-> 넣어놓고 사용 안하던 거 이제 사용한다..!

body에 refresh token을 넣어줘야 access token을 재발급 받을 수 있음

5. 프론트엔드와 벡엔드의 통신 만들기(Fetch API)

• js 처음 시작부터 console.log("로딩되었음") 찍어보면서, 통신이 원활히 되고 있는지 지속적으로 확인해야 한다!

• signup 기능

• 코드 뜻

window.onload = ()=>{   //  window와 api js 가 연결된 것을 확인하면, 실행해라

// JS에서 document = html 파일
function handleSignin(){
    const email = document.getElementById("email").value
    // console.log(email) email을 잘 뽑아서 찍히는지 확인 용도
    const password = document.getElementById("password").value // document의 id값이 password인 요소를 가져온다.
    console.log(email, password)

• response의 body인 refresh token과 access token 가져오기

const response_json = await response.json()

    console.log(response_json)

• refresh token과 access token을 local storage에 저장하기

		localStorage.setItem("access", response_json.access); // "access" -> localstorage의 key값 / response_json.access-> lovalstorage의 value값
    localStorage.setItem("refresh", response_json.refresh);