로그인구현 (4) [로그인 구현] 권한별 렌더링 1. 로그인 기능 구조로그인이 필요한 페이지와 그렇지 않은 페이지들로그인이 불필요한 페이지: 리액트 라우터 사용해서 컴포넌트 물어가도록 작성로그인이 필요한 페이지: 로그인 되어있는지 없는지 판단 후 처리이렇게 처리될 경우, 반복되는 로그인 확인 코드&로직들이 발생한다.페이지 이동할 때마다 로그인이 되었는지 확인해야하기 때문에 반복되는 로그인 확인 코드&로직들이 발생한다.반복되는 코드는 모듈화, 재사용하기-> 껍데기 컴포넌트 Authorization은 로그인이 필요한 페이지들을 담아가서 로직에 맞게 렌더링해줌실제 적용동작 살펴보기2. 레이아웃 컴포넌트RouterInfo 활용해서 사이드바 정보 생성사이드바, 헤더 등 레이아웃으로 감싸주기3. 유저 권한에 따라 접근 제어되는 웹 만들기 (admin)Missio.. [로그인 구현] Session 방식 로그인 서버가 session id를 기록하는 법세션id를 어떻게 알아 챘느냐? > 쿠키로 인해서..!쿠키란서버에서 보내주는 작은 데이터 조각으로, 서버에서 셋팅해주는 값서버에서 리스폰스 헤더에 담아서 전달해주면, 브라우저는 들고 있다가 같은 도메인으로 요청할 때 쿠키를 자동으로 담아서 전송한다.서버가 브라우저에 쿠키를 저장하는 방법문제점: 설정 등이 잘못되었을 경우 에러를 안내고 조용히 없어지기 때문에 찾는데 시간이 걸릴 수 있다.브라우저가 쿠키를 서버에 전송하는 방식쿠키는 클라이언트에서 건들면 안되는 것 쿠키 관련 정책 지정하기SameSite: None, Lax, Strict이 쿠키가 어떤 도메인에서 움직이게 할것이냐보안: None none은 아무 도메인에서나 가져가서 쓸 수 있음. (getCookie로 가져.. [로그인 구현] JWT 방식 로그인 1. 로그인 기능 연결로그인(POST)URL: urlbody: { username: string, password: string }response { access_token: string }**type LoginResult = 'success' | 'fail'export type LoginResultWithToken = { result: 'success' access_token: string} | { result: 'fail' access_token: null}export interface LoginRequest { username: string password: string}export const loginWithToken = async (args: LoginRequest): Promise .. [로그인 구현] JWT vs Session 로그인이란 무엇인가?사용자가 시스템에 액세스하기 위해 식별자 정보를 입력하는 것으로, 컴퓨터 보안 절차의 필수적인 부분이다.해당 사용자는 시스템의 제한된 파일 및 프로그램 세트에만 액세스 할 수 있다.시스템 로그 파일에 자동으로 입력되는 데이터 형식의 감사 추적도 제공.👉🏽 사용자가 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 컴퓨터 보안 절차1. 로그인 구현을 위해 FE가 해야하는 일로그인 페이지로그인 인증관련 데이터 관리 (토큰, 세션..)로그인 상태에 따른 화면/기능 제어(권한이 없는 자원에 접근하지 않는 구조 만들기)url로 직접 접근해도 404리턴2. 로그인 동작유저가 유저네임, 패스워드 등을 서비스에 전달하면 서비스는 이걸 비식별화해서 가지고 있다가 인증매번 이 동작을 .. 이전 1 다음
