22강 [토큰 저장] 질문

2026-09-30T11:14:42.403Z

0

답변 감사합니다.

1. 테스트 어드민 아이디로 정상 로그인 확인했습니다.

0

2. 발급된 Access Token의 payload에 ROLE_ADMIN 권한이 정상적으로 포함되어 있는지 --> 이 부분은 로그인 이후 개발자 도구의 [어플리케이션]메뉴에서 억세스 토큰이 쿠키에 저장되었는지 확인 가능한 지의 여부인가요?

   
   
   

0

관리자 페이지에서 유저 목록을 요청한 Network 탭의 Request/Response 화면

은 로그인한 이후, 브라우저의 개발자 도구에서 [네트워크] 메뉴를 의미하는 건가요?

0

2. 발급된 Access Token의 payload에 ROLE_ADMIN 권한이 정상적으로 포함되어 있는지 :정확하게 어디를 확인해야 하는지 모르겠지만.. test_admin으로 로그인하여 발급된 억세스 토큰이 브라우저의 개발자 툴의 [어플리케이션] 메뉴를 통해서 쿠키에 저장되어 있는 것 까지 확인했습니다.

   
   
   
   
   
   

0

Application 탭에서 Access Token이 저장된 것을 확인했으므로 로그인 요청과 토큰 발급/저장까지는 정상적으로 처리된 것으로 보입니다.

다만 관리자 페이지에서 유저 목록을 불러오는 것은 로그인 요청과 별도의 API 요청이기 때문에, 해당 요청도 정상적으로 처리되는지는 별도로 확인해야 합니다.

관리자 메뉴를 클릭한 뒤 개발자 도구의 Network → Fetch/XHR에서 새로 발생하는 요청의 Status Code와 Response를 확인해 주세요.

• 200 → 서버 요청은 정상, 화면 출력 부분 확인

• 401 → 토큰 인증 부분 확인

• 403 → 관리자 권한 처리 부분 확인

• 요청 자체가 없음 → 관리자 페이지의 API 호출 코드 확인

해당 화면을 캡처해주시면 어느 부분을 확인해야 할지 바로 좁혀볼 수 있을 것 같습니다.

그리고,

Access Token 내부의 권한 정보는 https://www.jwt.io 에서 확인할 수 있습니다.

1. 브라우저 개발자도구 → Application(애플리케이션) → Cookies

2. accessToken 값을 복사

3. jwt.io의 JWT Decoder에 붙여넣기

4. 가운데 Payload 부분을 확인

Payload 안에서 아래와 같은 권한 관련 항목을 찾아주세요.

{
  "role": "ROLE_ADMIN"
}

ROLE_ADMIN이 없거나 ROLE_USER로 들어가 있다면 JWT를 생성하는 부분부터 확인해야 합니다.

0

test_admin으로 다시 로그인하여 페이로드를 확인해보니, 롤에 관한 부분이 빠져있는 듯 하였습니다. 데이터 베이스에서 롤 설정을 해줘서 그런걸까요?

0

로그인 직후 개발자 도구의 Network → Fetch/XHR입니다. 상태코드는 200 인 듯합니다.

0

그리고 로그인 직후 어드민 페이지로 이동한 상황입니다.

0

그리고 어드민 페이지에서 신경쓰이는 부분입니다.

useEffect에서 fetchUser를 가져오는 부분에 노션에서 올리신 코드대로 fetchUser() 라고 코딩하면 에러가 납니다.

그리고 그 아래 줄에서 []에서 무언가 경고 표시가 나오는데,

링크를 클릭해보면, 아래와 같은 내용이 나옵니다.

[ESLint] Feedback for 'exhaustive-deps' lint rule · Issue #14920 · react/react

어제 저녁에 이 내용을 적용해 보려고 시도해 봤는데, 해결은 되지 않은 상태입니다.

1

추가로 올려주신 화면 확인했습니다.

우선 /admin 주소로 이동하고 Admin page입니다. 화면이 표시되는 것으로 보아 관리자 페이지로의 라우팅 자체는 정상적으로 이루어지고 있습니다.

다만 Network의 Fetch/XHR을 보면 로그인 시 발생한 login(200) 요청 외에 관리자 페이지에서 사용자 목록을 조회하는 API 요청이 발생하지 않고 있습니다.

따라서 현재는 JWT 권한 처리보다 먼저, AdminPage에서 사용자 목록 API를 호출하는 부분을 확인하는 것이 좋을 것 같습니다.

그리고 useEffect의 []에 표시되는 경고는 react-hooks/exhaustive-deps 경고입니다.

예를 들어

useEffect(() => {
  fetchUser();
}, []);

처럼 useEffect 내부에서 fetchUser 함수를 사용하지만 dependency 배열에는 포함되어 있지 않아서 ESLint가 알려주는 경고입니다. 이 경고 자체가 관리자 페이지가 동작하지 않는 직접적인 원인이라고 단정할 수는 없습니다.

다만 말씀하신 것처럼 fetchUser()를 작성했을 때 별도의 에러가 발생한다면 그 부분이 현재 문제와 관련 있을 가능성이 높습니다.

관리자 페이지로 이동했는데 Network에 사용자 목록 조회 요청 자체가 발생하지 않고 있기 때문입니다.

가능하시다면 AdminPage.jsx의 useEffect 부분과 fetchUser() 함수가 정의되어 있는 부분, 그리고 실제 API를 호출하는 부분을 함께 올려주세요. 그 부분을 보면 정확히 어디에서 요청이 막히고 있는지 확인할 수 있을 것 같습니다.

0

제 AdminPage.jsx의 전체 소스코드입니다.

0

return의 내용에 <li>태그가 중복되는 부분을 하나의 태그로 변경하였습니다. 결과는 그대로인 상태입니다.

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import axiosInstance from "../api/axiosInstance";
const AdminPage = () => {
  const [users, setUsers] = useState([]);
  const navigate = useNavigate();
  const fetchUsers = async () => {
    try {
      const res = await axiosInstance.get("/api/admin/users");
      setUsers(res.data); // 사용자 목록 상태에 저장
    } catch (err) {
      console.error("사용자 목록 불러오기 실패 : ", err);
      alert("사용자 정보를 불러오는 데 실패했습니다.");
      navigate("/");
    }
  };
  useEffect(() => {
    fetchUsers;
  }, []);
  return (
    <div className="home">
      <h2>Admin page입니다.</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.username}({user.role})
          </li>
        ))}
      </ul>
    </div>
  );
};
export default AdminPage;

1

아래처럼 변경하시면 될 것 같습니다!

fetchUsers; -> fetchUsers();

0

set-state-in-effect – React

그렇게 하니, 에러가 나오는데, 에러 메시지에 위의 링크가 포함되어 있습니다.

0

그리고 어드민 페이지의 문제도 해결되지 않았습니다.

0

다시 새로고침도 몇번 시도해 보았지만, 어드민 페이지에서 유저 정보를 가져오지 못하는 문제는 해결되지 않았습니다.

0

set-state-in-effect – React　

에러가 나오는데 어떻게 대응하면 좋을까요?