react mock에서 실제 backend 서버로 로그인 처리 질문입니다.

Question

안녕하세요? react 로 만든 frontend 에서 실제 backend 서버로 로그인 처리를 하려고 합니다.backend 서버에는 passport.js 사용하여 구현이 되어 있고요. 포스트 맨등으로 http://localhost:9000/api/auth/login 테스트를 해 보면 정상적으로 토큰을 받고, 과거에 개발했던 frontend 에서도 응답을 받았고요.이번에 새로 frontend 개발을 하면서 깃허브의 오픈소스를 썼는데, 로그인 처리 같은 부분이 mock 이용해서 되어있는 등 완성도가 있는 소스입니다. https://github.com/WinmezzZ/react-antd-admin그런데 이 frontend 에서 http://localhost:9000/api/auth/login 를 호출하면 backend 로그에는 요청이 찍히는데,응답을 받지 못하는 것 같습니다.로그인 버튼을 누르면 처리하는 부분이export const loginAsync = createAsyncAction(payload => { return async dispatch => { const { result, status } = await apiLogin(payload); if (status) { localStorage.setItem('t', result.access_token); localStorage.setItem('username', result.username); dispatch( setUserItem({ logged: true, username: result.username, }), ); return true; } return false; };});이 부분이고, const { result, status } = await apiLogin(payload); 에서 result 에 로그인 결과가 mock 에서 처리하면 true 로 들어오는데, 실제 backend 에 날리면 undefined 가 되면서 로그인 처리가 안 됩니다.apiLogin 부분은 아래처럼 구현이 되어 있고요.export const apiLogin = (data: LoginParams) => requestLogin('post', '/auth/login', data);/** * * @param method - request methods * @param url - request url * @param data - request data or params */export const requestLogin = ( method: Lowercase, url: string, data?: any, config?: AxiosRequestConfig,): MyResponse => { const prefix = 'http://127.0.0.1:9000/api'; url = prefix + url; console.log('* requestLogin, data:', data); console.log('* requestLogin, method:', method); if (method === 'post') { console.log('* requestLogin, url:', url); console.log('* requestLogin, data:', data); console.log('* requestLogin, config:', config); return axiosInstance.post(url, data, config); } else { return axiosInstance.get(url, { params: data, ...config, }); }};어느 부분이 문제일까요.. 이전 frontend 에서는 axios 를 직접 호출해서 처리했는데, 새로운 frontend 에서는 그런 부분이 구조화(?)가 되어 있어서 가능하면 소스 구조에 맞추려고 합니다.혹시 짐작되시는 부문이 있으면 한 말씀 부탁 드립니다.답변해 주시는 분들에게 미리 감사드립니다.

react mock에서 실제 backend 서버로 로그인 처리 질문입니다.

0개의 답변

#login 목록