search

10cheon00 / drf-practice

0 stars 0 forks source link

Working on Authorization... #8

Closed 10cheon00 closed 3 years ago

10cheon00 commented 3 years ago

먼저 backend라고 지어진 앱을 Articles(블로그)와 Profiles(토큰인증용)으로 나눴다.

backend
|-- articles
`-- profiles

앱의 디렉토리를 변경할 때 해줘야 할 것

  1. migration을 초기 상태로 변경해야 한다. 아마?
  2. settings.py에서 INSTALLED_APPS에 directory.app_name형태로 바꿔줘야 한다.
  3. apps.py에서 name항목도 directory.app_name'형태로 바꿔줘야 한다.
  4. 다시 migrate 하기.

djangorestframework-jwt를 설치, profiles에서 활용했다. view와 serializer도 없이 jwt에서 제공하는 메소드를 urls에 박아넣었지만, 커스텀 유저모델이 필요할 때면 다시 수정해야한다.

settings/local.py에서 REST_FRAMEWORK = {}안에 인증과 권한설정을 위해 몇 가지 추가했다. 그런데 이게 모든 상황에 적용되다보니 인증이 필요없는 조회를 위해 접근하려 할 때에도 토큰을 요구하며 401을 반환한다. 왜냐하면 articles의 viewsets에서 authentication_class, permission_class를 통해 인증을 거쳐야만 가능하게 했었다. 뷰셋을 사용해서 간단하게 만들었지만, 인증이 필요한 뷰와 그렇지 않은 뷰를 나누어야 겠다.

vue에서는 router를 수정해 signup/, login/ 두 개를 만들었다. signup에서는 커스텀 유저모델에 데이터를 저장하도록 했다...가 맞지만, 코딩을 다르게 했다. 아직 커스텀 유저 모델을 만들지 않아서 토큰을 받는 코드가 들어가있다. 수정해야겠다.

login에서는 username, password를 넘겨주면 토큰을 받아올 수 있게 했다.

profiles/urls.py에서 obtain_jwt_token을 통해 가능하다. 어떻게 받아오는지는 공부가 필요하다. localStorage에 저장해두면 이 토큰으로 백엔드에 요청을 보낼 때마다 활용할 수 있다.

10cheon00 commented 3 years ago

httpie로 프론트없이 api와 대화하기위해 따로 가상환경을 만들어 requirements를 깔끔하게 다루었다. http -v POST rest-blog.run.goorm.io/api/profiles/ username="" password=""

api주소 끝에 꼭 /를 넣어주어야 한다!

10cheon00 commented 3 years ago 
api 구조변경
backend
|-- articles
`-- profiles

pull request에 앱의 경로를 바꾸면서 해야할 것들 정리했다.

Django Restframework JWT

1. 설치

pip install djangorestframework-jwt

2. 설정

global로 사용될 Authentication_classes와 permissions_classes를 설정한다. https://github.com/10cheon00/RESTful-blog/blob/26e034580eb22cb3a98a00ce9df9061854162ed0/blog_project/blog_project/settings/local.py#L14-L21

설정만 해놓으면 viewset또는 view에 설정을 하지 않아도 기본으로 적용된다. https://github.com/10cheon00/RESTful-blog/blob/26e034580eb22cb3a98a00ce9df9061854162ed0/blog_project/backend/articles/views.py#L19-L23 23, 24줄을 보면 뷰셋에 설정한 것을 볼 수 있는데 이렇게 안해도 된다...

예외가 필요한 경우는 어떻게 해야할지 공부하기!

JWT_AUTH설정도 추가해야한다. https://github.com/10cheon00/RESTful-blog/blob/26e034580eb22cb3a98a00ce9df9061854162ed0/blog_project/blog_project/settings/local.py#L23-L30

10cheon00 commented 3 years ago

API 구성

token 발급

  1. urls 설정 https://github.com/10cheon00/RESTful-blog/blob/26e034580eb22cb3a98a00ce9df9061854162ed0/blog_project/backend/profiles/urls.py#L1-L13 api경로설정을 통해 토큰발급, 검증, 갱신을 할 수 있다...

    근데 verify를 사용하지 않았다? 코드 수정해야겠다!

  2. views 설정 커스텀 유저 모델을 작성했었더라면 이 부분에 serializer로 가입과 로그인뷰를 구성해야한다... 하지만 그냥 대충 돌아가기만 하면 된다는 마음으로 짜서 안했다... 해야한다!
10cheon00 commented 3 years ago

Vue App 작성

Signup, login.vue

https://github.com/10cheon00/RESTful-blog/blob/26e034580eb22cb3a98a00ce9df9061854162ed0/blog_project/frontend/src/components/SignUp.vue#L28-L38

당장 돌아가기 위해 url을 그대로 노출시켜버렸다. api에 username, password를 넣어 요청하면 유저모델에 추가해야한다. 이해되지 않은채로 짜서 지금은 토큰을 받는 코드가 되버렸다. 중요한 것은 axios를 사용할 때 인자를 넣어 요청하는 코드다.

https://github.com/10cheon00/RESTful-blog/blob/26e034580eb22cb3a98a00ce9df9061854162ed0/blog_project/frontend/src/components/Login.vue#L26-L37 로그인에서는 특이하게 localStorage를 사용한다. 개발자 도구를 보면 Application항목에 localStorage가 있다. 그 공간을 활용하는 것! localStorage.setItem(keyString, item)으로 저장을 할 수 있다. 반대로 불러오는 방법은 localStorage.getItem(keyString)이다.

Authentication?

https://github.com/10cheon00/RESTful-blog/blob/26e034580eb22cb3a98a00ce9df9061854162ed0/blog_project/frontend/src/components/Blog.vue#L38-L49

axios에 headers를 추가해 넘기고 있다. 솔직히 headers가 어떤 역할인지는 모르겠다. axios를 더 살펴볼 것! 중요한건 인증이 필요한 api에 이렇게 header로 토큰을 넘기면 인증이 통과된다는 것이다.