-
react ( Udemy강의 ) - 10. AuthenticationReactJS 2022. 5. 18. 09:26
웹사이트에 인증이 필요한 이유
- 보호해야 할 정보가 있기 때문
Two-step Process :
1 . Get access / permission
2. Send request to protected resource
How Does Authentication Work?
- We can't just save and use the 'yes' > We could send a fake 'yes' to the server to request protected data
1. Server-sid Sessions
- 사용자의 접근을 허가한 서버가 허가를 받은 클라이언트의 고유 ID를 생성 저장
- 이 ID는 서버에 후속 요청을 보낼 때 함께 첨부
- 단점 : 백엔드와 프론트엔드의 분리 상태는 사용하기 어렵다.
2. Authentication Tokens
- 서버에 자격 증명을 보내면 서버가 유효성확인까지는 같음.
- 자격 증명시 서버가 허가 토큰을 생성
- 각종 데이터를 한 문자열로 인코딩하면 나중에 다시 개별 데이터로 디코딩 가능
- 서버만 아는 키를 사용해 데이터를 문자열 해싱, 키는 클라이언트는 모르고 서버만 안다.
- 리엑트 앱 같은 클라이언트는 토큰을 후속 요청에 첨부해 서버의 보호된 리소스에 보냄
- 프론트엔드와 백엔드 분리를 허용하는 기법
- 인증 토큰 기법의 핵심은 로그인한 클라이언트의 어떤 정보도 서버에 저장X
권한에 따른 라우터 설정
<Switch> <Route path="/" exact> <HomePage /> </Route> {!authCtx.isLoggedIn && ( <Route path="/auth"> <AuthPage /> </Route> )} {authCtx.isLoggedIn && ( <Route path="/profile"> <UserProfile /> </Route> )} <Route path='*'> {/* 사용자가 입력하게 무엇이든 위의 라우트로 처리되지 않을 시 */} <Redirect to='/' /> </Route> </Switch> //방법2------------------------------------------------------------------------------ <Route path="/profile"> {authCtx.isLoggedIn && <UserProfile />} {!authCtx.isLoggedIn && <Redirect to="/auth" />} </Route>
로컬 저장소
- 브라우저에 있는 저장소, 간단하게 데이터를 저장, 페이지를 리로드해도 존재
- 페이지가 XSS공격에 취약할 때만 문제가 생김
- 기본 데이터( 문자열, 숫자 )만 저장 가능
'ReactJS' 카테고리의 다른 글
react ( Udemy강의 ) - 12. Testing React Apps (0) 2022.05.20 react ( Udemy강의 ) - 11. NextJS (0) 2022.05.18 react ( Udemy강의 ) - 9. Deployment (0) 2022.05.17 react ( Udemy강의 ) - 8. Routing (0) 2022.05.16 react ( Udemy강의 ) - 7-2. Redux (0) 2022.05.14