react ( Udemy강의 ) - 10. Authentication

웹사이트에 인증이 필요한 이유

     - 보호해야 할 정보가 있기 때문

 

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공격에 취약할 때만 문제가 생김

     - 기본 데이터( 문자열, 숫자 )만 저장 가능