springboot >> react 정보 가져오기 (헤더 bugfix)

이번 프로젝트를 하면서

springboot 백엔드단에서 api 정보를 호출해서 react 에서 쓰고있는데

관련해서 정리할겸, 방금 아침에 눈뜨자마자 팀원한테 연락온 버그를 고치는걸 기록해두려고 함

 

 

일단 지금 문제는 영상통화 파트를 맡은 팀원이

로그인은 되는데 로그인 후 작업하다보면 헤더에 로그아웃 된것 처럼 이름도 안뜨고 콘솔에는 이런 에러들이 떠서 작업이 불가능하다고 연락옴

 

Get http://localhost:8080/users/myprofile 이 403 이다

로그인 했는데 403? 접근권한없음 메세지?

 

보자마자 아 내가 백엔드에서 경로 전부다 permitAll 로 열어두고,

컨트롤러에서 api 별로 hasRole 로 권한을 걸어놨는데 거기서 걸렸나보다 싶었다

일단 users/myprofiile 은 hasRole 로  user, admin 만 허용해놨기 때문에 팀원이 보내준 사진을 더 봤더니

management 로 로그인 하고 계셨다

 

management 로 로그인하고,, user 쪽 api 에 접근하려고 하셔서 접근제한 오류가 났나보다 싶어서

user api에 management 접근 못하게 해놔서 그런것 같다고 말씀 드렸다

 

 

 

그랬더니 더 자세하게 오류가 나게된 플로우를 알려주셨는데,, header??

header 라는 단어 보자마자 다 이해가 갔다,,

 

 

 

제일 처음 보내주신 에러 떠있는 콘솔 사진을 보면

localhost:3000/meetingroom/createroom  으로 접속 중이시니까 ... 그래서.. 아하...

 

처음 헤더를 누군가 만들어뒀길래

그 헤더를 똑같이 하나 더 만들어서 management 용 헤더를 추가해준 다음,

/management/..    ->  management 용 헤더 적용

그외   ->   일반 헤더 적용

이렇게 내가 App.js 에 세팅을 해뒀다

const isManagementPage = location.pathname.startsWith('/management');

return (
      <div className='header-wrap'>
          {isManagementPage ? <ManagementHeader /> : <Header />}

이런 식으로..!

 

 

근데 지금 오류가 난건

management 가 아니고 localhost:3000/meetingroom/createroom 로 접속해서 일반헤더(user용 헤더)가 적용돼서...

그래서 백엔드 상에서는 users/myprofile 을 받아오려니 응? 너는 management 회원인데 왜 user api 에 접근해? 접근 안돼! 한거였다

 

몇시간동안 헤맸을 팀원분께는 죄송하지만

다행이라면 다행인건 헤더를 나눈 사람도 나고, api 에서 user, management 따라서 접근 권한 설정한 사람도 나라서

header 라는 단어와  접속 중이신 meetingroom/createroom 주소창을 보자마자 에러 원인도 알고 해결방법도 떠올랐다

 

 

1. 로그인한 사람의 정보에서 role 을 찾아서 role에 따라 user 는 user 헤더, management 는 management 헤더

+ 여기에 새로추가된 role인 artist 도 artist 용 헤더를 추가해서 넣어주는걸로

 

기존에 내가 만들었던.. 주소 따라서 헤더를 구별하는건 너무 단순한 방법이었던것 같다

내가 맡은부분들은 주소가 너무 명확해서 그렇게만 해도 오류가 나지 않았는데

다른 팀원들이 맡은 부분들을 고려해서 처음부터 이렇게 했으면 좋았을것을 아쉽다

 

2. user 백엔드 api 에 hasRole 제한 해제?

 

일반 user회원이 management가 관리하는 페이지들 url을 직접 넣었을때 들어가지면 안되지만,

user 쪽 api 는 굳이 user, admin 만 접근가능하게 하지않고 management 도 접근가능하게 해도 되지않을까 하는 생각이 들었다

이건 일단 급한 문제는 아니라서 보류..

 

 

 

---

 

 

 

일단 글 제목처럼 백엔드 정보를 react 로 받는 방법에 대해 말해보자면

 

우리팀원들은 다 session 만 사용해보고 token 방식이 처음이라

react도 전원 처음시도인데 token 까지 더해져서 백엔드 단의 user 정보를 받아오는 방법을 몰랐다

수업시간에 배운건 session 인데 token 을 해보겠다고 한건 나이기 때문에,,

내가 로그인 기능 구현 후 slack 으로 자세히 유저정보 불러오는 법에 대해 정리해서 올린게 있다..

그걸 붙여넣기 해보면

 

 

 

1. 로그인 정보 없는 상태

 

 

 

 

2. 로그인 정보 가져오기

   1) import 추가

    import api from '../../apiClient';

   2) 백엔드 myprofile api 불러오기

    api.get('/users/myprofile');

이렇게하면 유저 정보 가져와집니다!

백엔드에서 /users/myprofile api 의 response 값에 user 관련 정보들 다 담아놨거든요!

 

 

 

 

3. 이 원리로 헤더에 로그인한 유저이름 가져오기

   1) import 추가

 

   2) 코드 추가

이렇게 fetchUserInfo 안에 const response = await api.get('/userse/myprofile')

을 넣어주면 유저정보를 가져올 수 있습니다!

저는 이름만 필요하기 때문에

setUserName(response.data.name) 해서 유저 이름 가져왔습니다

 

    const fetchUserInfo = async () => {
        try {
            const response = await api.get('/users/myprofile'); // 사용자 정보 가져오기
            setUserName(response.data.name); // 사용자 이름 상태 업데이트
        } catch (error) {
            console.error("사용자 정보 가져오기 오류:", error);
        }
    };

    useEffect(() => {
        fetchUserInfo(); // 컴포넌트가 마운트될 때 사용자 정보 가져오기
    }, []);

 

유저정보 가져올때 이렇게 참고해주시면 될 거같습니다!

 

management 정보도 백엔드 api 중 response 로 정보 다받아오는게 있어서 그걸 쓰면 될것같습니다

const response = await api.get(‘/management/myprofile');

로그인한 management 데이터 가져오는 주소입니다!

 

 

 

이까지가 슬랙에 공유한 내용이다~

 

아래는 로그인한 사람 정보 가져오기위해 내가 만들어둔 인터셉터 로직이다

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:8080',
});

api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('accessToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default api;

 

 

---

 

다시 오류잡기로 돌아가서,,

 

1. 로그인한 사람의 정보에서 role 을 찾아서 role에 따라 user 는 user 헤더, management 는 management 헤더

+ 여기에 새로추가된 role인 artist 도 artist 용 헤더를 추가해서 넣어주는걸로

 

이부분을 적용해보자..!

 

 

 

생각보다 오래걸림.. decode 해주려다가 ...

 

gpt는 프론트에서 decode 쓰는거 추천해줬는데 써봐도 오류나고 약간 코드가 복잡해지는 느낌이있어서,,

나는 백엔드에서 로그인 시 accesstoken 만 response 해줬었는데 role 도 같이 응답해주는걸로 추가

이렇게 하니까 금방 해결됐다..

 

프론트에는 로그인 페이지에

localStorage.setItem('role', response.data.role); 

이거 한줄 추가 해주고 콘솔에 찍어보니 잘 나오는거 확인

 

App.js 에 이글 위에도 나와있는

const isManagementPage = location.pathname.startsWith('/management'); 이부분 제거하고

const [role, setRole] = useState(null);

  useEffect(() => {
    const storedRole = localStorage.getItem('role'); // 역할을 로컬 스토리지에서 가져옴
    if (storedRole) {
      setRole(storedRole);
      console.log("Stored Role:", storedRole);
    }
  }, []);

  // 역할에 따라 헤더 선택
  const renderHeader = () => {
    if (role === 'MANAGEMENT') {
      return <ManagementHeader />;
    } else if (role === 'ARTIST') {
      return <ArtistHeader />;
    }
    return <Header />;
  };

코드 변경해줌

 

 

문제가 됐던 localhost:3000/meetingroom/createroom  여기에

일반 유저로 로그인 후 들어가면

 

잘 뜬다!

 

 

 

 

 

이제 management 회원으로 로그인후 다시 들어가봐도

잘 뜬다!

 

해결 완료..