[TIL] JS fetch에서 401 UnAuthorized error가 날 때

오늘 한 것

 

1) MySql 다시 연결 및 workbench 툴 익히기!

 ㄴ 이 부분은 MySql사용하기 글에 추가하도록 하자.

 

2) 프로젝트 담당페이지 html 만들기

 

3) drf "permission"의 제대로된 의미를 익혔다

 

 

 

 

 

---

 

 

 

- javascript에서 401에러로 정보를 가져오지 못할 때 해결방법

 

 

 

 

'permission' 은 인가!  인증과는 차이가 있다.

 

 

인가는 api를 요청한 사람에게 권한을 줄 것인가 주지 않을 것인가의 문제이고

인증은 사용자가 유효한 사용자인지, 가입되어있는 정보가 있는지 인증하는 것.

 

 

 

가져오고 싶은 데이터의 해당하는 코드를 보면, 이 부분이 포함되어있음을 알 수 있다

permission_classes = [permissions.IsAuthenticated]

 

 

그러니 console 창에서 신나게 본

401 UnAuthorized 에러는 '인가'판별해줄 정보가 없다는 문제.

 

 

 

 

 

 

 

 

위 에러를 해결하는 2가지 방법이 있는데

포스트맨에서 해결하는 방법, JS에서 해결하는 방법이 있다.

 

 

* 그 이전에 어떤 페이지를 만들지 생각하는 것이 중요하겠다.!

민감하지 않은 정보라면 permission을 넣지 않은 코드를 작성 및 사용하거나 코드에 맞게 데이터를 가져올 수 있도록 하자.

 

 

 

 

 

 

 

1) 포스트맨에서 해결하기 

 

 

필요한 페이지에서  Headers에 Authorization, Bearer + access token을 넣어준다

 

 

아래는 환경 설정에 token을 넣어두어서 {{token}}으로 가능한 것

환경은 incheonjumak 으로 설정되어있음!

 

 

 

아래는 incheonjumak 환경설정

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2) 두번째 방법, JS Headers에 토큰 넣어주기

 

 

fetch로 url에서 정보를 가져올 때 headers 를 추가, 토큰을 넣어준다.

 

const response_json = await fetch(`${backend_base_url}/api/user/profile/`, {
        method: 'GET',
        headers: {
            Authorization : "Bearer +access token"
        } 
        // 토큰넣기! 토큰값을 저장해두고 보내주기
    }
    ).then(response => {return response.json()})

 

 

 

+ 

.then

 

fetch는 두번 인자로 Promise라는 것을 받는데

 

그 위치에 .then을 넣어준다!

then으로 반환된 Promise 객체의 결과를 받아 후속 처리한다.

 

=  데이터를 받아서 json으로 return해주도록 작성.

 

 

 

 

 

[참고] : Promise의 더 자세한 설명

https://ant-programmer.tistory.com/48

 

 

 

 

 

 

 

 

결론 : 어떤 방법이든 Headers에 토큰을 넣는 것이 401을 해결하는 방법!

 

 

 

 

 

 

 

 

이전 학습내용을 바탕으로 내일(사실은 오늘) 할 것

• 이제 문제를 해결했으니 JS완성하고 프로필페이지 마무리해보자
  
  

 

 

---

 

 

 

어제 계획 한 것은 거의 못했다..

 

계속되는 error메세지들로 멘탈이 터져서 컨디션 안좋은 김에 쉬고 일찍 자고 일찍 일어났다

 

일찍 일어난 김에 어제 tistory 안켜지는 문제를 해결해 TIL쓰는 중.

tistory 문제가 아니라 크롬 브라우저 문제였다.

 

 

 

 

* 해결 방법 *

 

크롬브라우저 > 설정 > 개인 정보 및 보안 > 인터넷 사용기록 삭제

 

인터넷 사용기록은 지난 1시간으로 되어있는데 전체기간을 체크하여 삭제하자!

로그인을 다시해야하는 번거로움이 있긴 하지만 아예 동작안하는 에러는 어제의 나에겐 너무 버거웠는 걸..