멘토님들에게 궁금해요!

Q1. 상태 관리 라이브러리를 통해 토큰을 저장해서 페이지를 이동할 때마다 유효한지 검증하는 방식이 맞는지? 실무에서는 이렇게 사용하는지 궁금합니다.

• SPA인 경우 처음 initialize 단계에서 1회만 하고 있습니다. 이후 서버에 API를 찌를 때마다 해당 토큰을 헤더나 파라메터 등에 실어서 보내고, 서버에선 API 요청을 받을 때마다 토큰을 체크하여 자연스럽게 유효성을 계속해서 검증하는 방식이죠. 이후 토큰이 만료되었다는 에러가 서버에서 내려오면 리프레시 토큰을 이용해 토큰 연장을 하는 처리를 하고 있습니다. 우선 필요한 구현이 몇가지가 있는데
• 서버에서 해야하는 구현
• 서버에서는 인증된 토큰을 헤더나 파라메터 등으로 항상 받도록 합니다.
• 서버에서는 API 호출이 들어오면 위의 토큰을 먼저 검증합니다.
• 검증에 성공하면 원래 API 동작을 하고, 검증에 실패하면 401 에러를 던집니다.
• 클라이언트에서 해야하는 구현
• API 요청시 인증된 토큰을 헤더나 파라메터 등으로 서버와 약속된 방식으로 던집니다.
• API 요청을 처리하는 곳에서, 만약 응답이 401이 떨어졌을 경우의 처리를 합니다.
• 인증 토큰과 리프레시 토큰을 같이 발급 받아서 이때 리프레시 토큰을 이용해 새 인증 토큰을 발급 받고 성공 시 해당 토큰을 local storage에 저장한 뒤 하려던 API 다시 요청
• 리프레시 토큰으로 새 토큰 발급 받기 실패 시 로그아웃 처리

• 보안을 생각하면 매 페이지 이동시마다 체크해도 상관은 없지만, Server Side Rendering의 경우 페이지 진입하기 전에 체크가 끝나서 괜찮은데 Client Side Rendering의 경우 렌더링 이후에 인증을 ajax로 체크해야하는데 이때 불필요하게 화면이 블락되거나 하는 등 사용성이 좋지 않을 수 있습니다. 그래서 위에 적은 것처럼 초기 단계에서만 하던지 하는 타협점이 필요합니다.

Q2. 토큰 유효성 과정을 코드로 예시를 보고 싶습니다. (저같은 경우는 컴포넌트 자체에 토큰 유효성을 체크했는데 비슷한 예시를 본 적이 없어서 옳게하고 있는 것인지 궁금합니다.)

• react.js 기준이긴 한데요.

function App() {
  const [isInitialized, setInitialized] = useState(false)

  const checkToken = async () => {
    // token 검증함
    if (isValidToken) {
      setInitialized(true)
    } else if {
      history.push('/login')
    }
   
    
  }
  useEffect(() => {
    checkToken()
  })

  if (!isInitialized) {
    return null
  }
  
  return (
    // 하위 컴포넌트 렌더링  
  )
}

위의 로직을 별도의 Context로 뽑아서 쓰기도 합니다.
유효성을 마친 이후에 렌더링이 시작되기 때문에 하위 컴포넌트에서는 유효성 체크를 신경 쓸 필요가 없습니다.