React Universal App : 인증 된 API 호출

나는 상태 관리를 위해 redux를 사용하여 반응 애플리케이션을 구축 해왔다. 자습서를 온라인에서 살펴본 후 로그인/로그 아웃 기능이있는 멋진 앱을 만들 수있었습니다. 그러나 새로 고침하자마자 404가 생겼습니다. 클라이언트 쪽 렌더링이라는 사실을 깨달았습니다. 그래서, 루트를 처리하는 익스프레스 서버를 추가하여 서버 측 렌더링을 수행했습니다.React Universal App : 인증 된 API 호출

데이터 가져 오기를 호출하는 API에는 인증이 필요합니다. componentDidMount에있는 jwt 토큰을 사용하여 API를 호출합니다. 그것은 클라이언트 측에서 잘 작동합니다.

여기 내 질문은 :

그러나 사용자가 페이지를 새로 고침하는 경우, 서버는 componentDidMount의 호출을 클라이언트 다음에 HTML 골격을 보냅니다. 데이터 가져 오기를 서버 측에서 수행 할 수 있습니까? 그렇다면 토큰 (브라우저의 localStorage)을 어떻게 얻을 수 있습니까?

출처

2017-03-13 rish08

귀하의 질문이 무엇인지 분명하지 않습니다 (그 중 상당수가 적음). 질문을 좀 더 구체적으로 작성해 주실 수 있습니까? –

을 수정하여 질문을 2로 제한하십시오. – rish08

서버가 브라우저에 액세스 할 수 없기 때문에 localStorage 브라우저에서 데이터를 가져올 수 없습니다. API에 액세스 토큰이 필요한 경우 먼저 페이지를 렌더링하고 토큰을 localStorage에서 가져 와서 API에서 데이터를 가져옵니다.

출처

2017-03-13 12:22:24

인증이 필요한 앱에서 데이터를 가져올 수 없으므로 서버에 포인트 렌더링이 없습니다. – rish08

사용자가 인증되었는지 여부에 관계없이 표시되는 구성 요소를 계속 렌더링 할 수 있습니다 (탐색 모음, 바닥 글 등). SSR은 SEO에도 유용합니다. –

감사합니다 Deividas. 마지막 질문 하나 - 클라이언트에서 렌더링 중이며 서버에서 라우팅을 처리하여 사용자가 새로 고침을 수행 할 때 404가 표시되지 않도록합니다. 내 응용 프로그램이 범용/동형이 될 것입니까? – rish08

React Universal App : 인증 된 API 호출

답변

관련 문제