Access Token을 서버에서 내려받아 후처리 (feat. 401 에러)

서버는 stateless 하기 때문에 한 번 인증을 한 후에 다시 데이터에 접근하려면 또 인증을 해주어야 함

그래서 우리는 Access Token을 받아서 HTTP header에 값을 전달하여 인증을 하지 않고 데이터에 접근할 수 있도록 할 것임

 

Access Token은 JWT 방식의 JSON 타입으로, 유저 정보를 담아 암호화한 토큰을 말한다.

그래서 응답 받은 토큰을 Base64 Web Decoder에서 복호화하면 유저의 정보를 확인할 수 있다.

 

그러면 그렇지 오늘도 에러다.. ㅎㅎㅎㅎ

로그인이 완료되어서 200까지 받은 건 확인이 됐지만 받아 온 access token을 헤더에 넣어서 보냈을 때

INFO:     127.0.0.1:64412 - "GET /items HTTP/1.1" 401 Unauthorized

이렇게 에러를 출력해주었다 하하 나는 분명 맞는 id와 pw를 입력했는데,,

 

js에서 콘솔을 찍어봤더니 로그인 후에 받아오는 리턴값이 나는 data라는 오브젝트 안에 토큰값이 들어온 줄 알고

  # js
  const loginRes = await fetch("/login", {
    method: "post",
    body: formData,
  });
  
  # python
    @app.post('/login')
	def login(id: Annotated[str, Form()],
              password: Annotated[str, Form()]):
      user = query_user(id)

      if not user:
        raise InvalidCredentialsException
      elif password != user['password']:
        raise InvalidCredentialsException

      access_token = manager.create_access_token(data={
        'sub': {
          'name': user['name'],
          'email': user['email'],
          'id': user['id']
        }
      })

      return access_token

# js
  const data1 = await loginRes.json();
  accessToken = data1.access_token; # <- 이 부분이 잘못 되었음

accessToken에 값을 할당했는데 data1 자체가 accessToken 값으로 변환되어서 들어왔던 거였다.

 

그래서 토큰값이 undefined로 계속 들어가있었어서 데이터에 접근할 수 없었던 거고 다시 data1로 바꿨더니 잘 됐다!