on
프런트 엔드의 재사용 가능한 인증 논리
프런트 엔드의 재사용 가능한 인증 논리
어디서나 한 번 쓰기
언더 더 후드
이 모든 아이디어는 XState를 배울 때 떠올랐습니다. 즉, 상태를 유지하고 모든 애플리케이션을 하나의 기계로 처리하는 새로운 방식입니다.
XState의 논리는 매우 흥미롭습니다. 웹, 모바일 또는 백엔드 도메인에 관계없이 모든 애플리케이션을 단순한 시스템으로 취급할 수 있기 때문에 개발 작업이 매우 쉽습니다.
만약 당신이 XState의 기본 개념을 이해하고 싶다면, 나는 이것에 대한 전체 새로운 이야기를 다룰 것이다. 오늘은 UI 또는 백엔드 서비스를 만들기 전에 모든 애플리케이션을 먼저 비즈니스 논리를 작성하는 XState 논리에서 영감을 받아 쓴 내용입니다.
개요
오늘의 주요 의제는 프런트 엔드에서 사용자를 인증하는 비즈니스 논리를 작성하는 것입니다. NAT은 로그인, 로그인하지 않음, 익명 사용자 등 사용자가 애플리케이션에 존재하는 상태를 다룹니다.
대신 프런트 엔드 UI 인터페이스를 생성하지 않고 애플리케이션 내에서 사용자를 인증하는 비즈니스 논리에 대해 논의합니다.
끝으로, 한 가지 제한 사항만 가지고 거의 모든 애플리케이션에서 재사용할 수 있는 논리가 있으며, 이 논리에 Redux를 사용하므로 Angular 또는 Vue와 같은 다양한 프레임워크에서 호환된다는 제한이 있습니다.
시작하기
당사 애플리케이션 내에서 사용자 상태를 정의하는 것으로 파티의 이해를 시작하겠습니다.
단일 사용자 상태 또는 유형
모든 제품을 통해 사용자는 2단계를 통해 제품을 소비할 수 있습니다.
익명 사용자
익명 사용자
따라서 현재 단계에서는 사용자가 2가지 유형일 수 있으므로 사용자의 초기 상태는 로그인 또는 로그인되지 않음으로 인해 모든 인증 단계가 성공적으로 완료됩니다.
const initialState = { isUserLoggedIn: false, };
위의 상태는 전체 애플리케이션의 초기 글로벌 상태입니다. 글로벌 상태는 해당 시간에 사용자가 존재하는 특정 상태로 구성됩니다.
이 경우 사용자가 기록됨그러면 전체 애플리케이션에 로그인했다고 말할 수 있고, 중요한 데이터를 사용자에게 보여 주고 사용자에게 제품 또는 애플리케이션을 인증해야 하는 인터페이스로 사용자를 보낼 수 있습니다.
작업사용자 상태 전환
다음 단계에서는 로그인된 사용자 상태를 로그아웃 상태로 전환하거나 로그아웃 상태로 전환합니다. 여러 가지 방법으로 할 수 있죠? 하지만 저는 항상 이 작업을 수행하는 작업이나 특정 기능을 선호합니다.
작업은 사용자 상태를 전환하며 초기 상태 키는 UserLoggedIn입니다.
저는 두 가지 다른 작업을 설계하고 싶습니다. 하나는 사용자가 로그인하는 작업을 true로 설정하고 다른 하나는 true로 설정합니다.
function setUserLoggedIn(){ initialState.isuserLoggedIn = true }; // this state will achieve once user is logged in successfully
function setUserLogout(){ initialState.isUserLoggedIn = false; }; // this condition is achieved once user logged out successfully
두 작업 모두 매우 간단하지만 분리하면 UI 인터페이스를 그에 맞게 변경할 수 있는 많은 권한을 개발자에게 부여합니다.
사용자 데이터 저장
이야기의 이 부분은 디커플링과 개별적인 행동의 힘을 이해하게 해줄 것이다. 이상적인 경우, 로그인한 사용자는 글로벌 저장소에 저장해야 하는 데이터를 확실히 갖게 됩니다. 예를 들어 사용자 이메일, 사용자 ID, 사용자 토큰 등이 있습니다.
첫 번째이자 가장 중요한 단계는 초기 상태에서 기본 사용자 데이터를 추가하는 것입니다.
const initialState = { isUserLoggedIn: false, loggedInUserData: { email: String, id: String } };
여기서 인증 토큰에 대해 질문이 있을 수 있습니다. 잠시 후 인증 토큰을 살펴보겠습니다.
초기 상태에서 사용자 데이터를 설정하는 작업
사용자 데이터에 대한 초기 상태를 정의한 후 다시 초기 상태에서 사용자 데이터를 업데이트하기 위한 작업이 필요합니다.
function setUserData({ email, id }){ initialState.loggedInUserData.email = email; initialState.loggedInUserData.id = id }; // call the setUserData after fetching the data from database via API function fetchUserData(){ const response = await axios.get('/user', { headers: Bearer token }); setUserData({ email: response.email, id: response.id }) } // fetching user data from API
fetchUserData 메소드를 살펴본다면, 우리는 axios API에 토큰을 헤더에 보냈습니다. 이것이 바로 우리가 토큰을 가지고 놀 다음 부분입니다.
인증 토큰
거의 모든 애플리케이션의 경우 프런트 엔드에서 토큰을 사용하여 클라이언트 측의 중요 데이터를 API에서 가져옵니다. 따라서 대부분의 경우 쿠키나 브라우저의 세션 스토리지에 토큰을 저장하지만 초기 상태 토큰을 저장하는 것이 필수적입니다. 하지만 모바일 기기용 세션 스토리지가 없기 때문에 글로벌 스토어에서 토큰을 처리해야 합니다.
const initialState = { isUserLoggedIn: false, loggedInUserData: { email: String, id: String }, token: String };
글로벌 저장소에 사용자 데이터를 저장하기 전에 토큰을 사용하는 것이 가장 좋습니다.
토큰 저장 작업
토큰을 initialState에 저장하기 위해 따를 기술과 동일한 기술로 별도의 작업을 생성할 필요가 없습니다. 모든 경우에 사용자가 로그인하면 초기 상태로 설정할 수 있는 토큰을 받게 됩니다. 내부에서는 UserLogged를 설정합니다.이 방법에서는 토큰 geting을 주장으로 설정할 수 있습니다.
function setUserLoggedIn(token){ initialState.isuserLoggedIn = true; initialState.token = token }; // We will setUserLoggedIn once token is returned and the login API will give true as a response function login({ email, password }){ const response = await axios.get('/login', { email, passsword }); if(response.success){ setUserLoggedIn({ token: response.token }) }else { return { success: false, error: response.error } } }
이메일과 패스워드를 제공하여 API에 로그인하기 위해 API 호출을 하고, API 응답을 기반으로 토큰을 설정합니다. 또한 사용자 이메일이나 비밀번호가 잘못되었거나 API가 응답에 너무 많은 시간이 걸리거나 인터넷이 중단될 경우에 대비해서 에러 발생을 처리하고 있습니다.
사용자 제거 또는 로그아웃 작업
사용자 로그인 상태를 설정하는 작업을 정의했습니다. 이제 사용자가 로그아웃한 후 에서 사용자 데이터도 제거해야 합니다.
function setUserLogout(token){ initialState.isuserLoggedIn = false; initialState.token = "" }; // We will setUserLogout once the API response is false function logout({ email, token }){ const response = await axios.get('/logout', headers: { token: Bearer token } { body: { email } } ); if(response.success){ setUserLogout(); }else { return { success: false, error: response.error } } }
사용자를 로그아웃하기 위해 다른 API 호출을 해야 하는 이유가 궁금하실 수도 있지만, 대부분의 경우 Redis를 사용하여 데이터베이스에 사용자 세션을 저장하므로 사용자가 API를 사용하여 애플리케이션에서 로그아웃한 백엔드 서버와 데이터베이스를 업데이트해야 합니다.
추상적
우리가 무엇을 했는지 짚어보겠습니다.
사용자가 애플리케이션에서 로그아웃한 경우에도 유사한 패턴이 나타납니다. 이 경우 데이터를 추가하는 대신 토큰을 제거하고 UserLogged를 설정합니다.글로벌 스토어에서 거짓으로.
사용자가 애플리케이션에서 로그아웃한 경우에도 유사한 패턴이 나타납니다. 이 경우 데이터를 추가하는 대신 토큰을 제거하고 UserLogged를 설정합니다.글로벌 스토어에서 거짓으로.
사용자가 애플리케이션에서 로그아웃한 경우에도 유사한 패턴이 나타납니다. 이 경우 데이터를 추가하는 대신 토큰을 제거하고 UserLogged를 설정합니다.글로벌 스토어에서 거짓으로.
사용자가 애플리케이션에서 로그아웃한 경우에도 유사한 패턴이 나타납니다. 이 경우 데이터를 추가하는 대신 토큰을 제거하고 UserLogged를 설정합니다.글로벌 스토어에서 거짓으로.
사용자가 애플리케이션에서 로그아웃한 경우에도 유사한 패턴이 나타납니다. 이 경우 데이터를 추가하는 대신 토큰을 제거하고 UserLogged를 설정합니다.글로벌 스토어에서 거짓으로.
사용자가 애플리케이션에서 로그아웃한 경우에도 유사한 패턴이 나타납니다. 이 경우 데이터를 추가하는 대신 토큰을 제거하고 UserLogged를 설정합니다.글로벌 스토어에서 거짓으로.
결론
이것은 꽤 유용하고 확장 가능한 논리이다. 나는 포인트와 이 논리의 장점을 차례로 언급할 수 있다. 또한 모든 애플리케이션의 모든 프레임워크에서 재사용이 가능하며, 전자 상거래든 스포츠든 기술 제품이든 상관 없습니다.
인증 흐름의 핵심입니다. 이 논리 자체에서 시작하는 토대는 매우 강력합니다. 전자상거래 애플리케이션이나 피트니스 제품이 있더라도 이 논리는 완벽하고 매끄럽게 들어맞습니다.
저희가 계속 비슷한 이야기를 나누고 있는 만큼, 네 라면 이 컨셉이 마음에 드셨기를 바랍니다. 다음번엔 좋은 하루 보내요, 여러분
For more such stories do check out website - �� iHateReading
추가 읽기
from http://devcloset.tistory.com/167 by ccl(A) rewrite - 2021-07-08 08:01:08