바닐라 JavaScript 로그인 상태 모니터-JS 튜토리얼-php.cn

소개

웹 개발 영역에서 JavaScript는 여전히 초석 기술입니다. 프레임워크와 라이브러리는 개발을 단순화할 수 있지만 바닐라 JavaScript를 마스터하면 언어의 복잡성을 이해하기 위한 견고한 기반이 제공됩니다. 가장 좋은 방법은 개발자, 특히 해당 분야에 처음 입문하는 개발자에게 프레임워크를 탐색하기 전에 바닐라 JavaScript 기술을 연마하는 데 집중하는 것이 좋습니다.

사용자 로그인 상태 추적의 중요성
사용자 로그인 상태를 효과적으로 관리하는 것은 웹 애플리케이션의 보안, 효율성 및 전반적인 사용자 경험을 보장하는 데 중요합니다. 사용자 로그인 추적을 구현하면 다음과 같은 이점이 있습니다.

첫 번째 부분
보안 강화: 액세스 권한을 얻기 전에 사용자에게 로그인을 요구하여 중요한 데이터에 대한 무단 액세스를 방지합니다. 최적화된 리소스 활용: 데이터를 로컬에 저장하고 변경 사항이 있을 때만 업데이트하여 서버에 대한 불필요한 요청을 최소화합니다.

데이터 무결성: 수정, 추가, 삭제를 제어하여 데이터 일관성을 보장합니다.
향상된 사용자 경험: 타임스탬프를 활용하여 비활성 사용자를 자동으로 로그아웃시켜 보안을 강화하고 사용자 경험을 간소화합니다.
원활한 서버 상호작용: 클라이언트와 서버 사이에 강력한 통신 채널을 구축하여 효율적인 데이터 교환 및 동기화가 가능합니다.

잘 설계된 사용자 로그인 추적 시스템을 구현함으로써 개발자는 웹 애플리케이션의 보안, 성능 및 전반적인 품질을 크게 향상시킬 수 있습니다.

두 번째 부분:

이제 코드를 살펴보겠습니다.

먼저 변수가 기기 로컬 저장소에 액세스할 수 있도록 합니다.
const 저장소 = window.localStorage;

두 번째로 초기/기본 데이터 값을 갖는 변수를 생성하겠습니다.
새로운 데이터가 들어오거나 변경될 때마다 동일한 데이터 값이 업데이트됩니다.

변수는 다음과 같습니다.

const initialState = {
     userData: storage.getItem('exampleUserData') || null,
     timestamp: null,
     isLoggedIn: false
        };

로그인 후 복사

세 번째 부분:

이제 데이터를 기기 로컬 저장소에 저장하는 기능을 만들어 보겠습니다.

function cacheUserData(data) {
  storage.setItem('exampleUserData', JSON.stringify(data));
}

로그인 후 복사

이제 코드의 주요 부분을 만들어 보겠습니다.
이것이 우리의 감속기 기능입니다.

이 기능은 장치 로컬 저장소에서 삽입, 업데이트, 삭제를 통해 데이터를 제어하는 역할을 합니다.

코드는 다음과 같습니다.

function myReducer(state = initialState, action) {
  switch(action.type) {
    case "LOGIN":
      cacheUserData(action.payload);
      return {
        userData: action.payload,
        timestamp: Date.now(),
        isLoggedIn: true
      };

    case "LOGOUT" : 
      storage.removeItem('exampleUserData');
      return {
        userData: null,
        timestamp: null,
        isLoggedIn: false
      };  
    default:  
      return state;
  }
};

로그인 후 복사

이 코드를 단계별로 분석해 보겠습니다.
함수 서명
자바스크립트

function myReducer(state = initialState, action) {
  // ...
}

로그인 후 복사

Redux와 같은 상태 관리 라이브러리의 핵심 개념인 리듀서 기능입니다. 감속기는 두 가지 인수를 사용합니다:

state: The current state of the application. If no state is provided, it defaults to initialState.
action: An object that describes the action to be performed.

로그인 후 복사

스위치 설명
자바스크립트

switch (action.type) {
  // ...
}

로그인 후 복사

이 스위치 문은 액션 개체의 유형 속성을 확인하고 해당 코드 블록을 실행합니다.
로그인 사례

Vanilla JavaScript Login Status Monitor
자바스크립트

const initialState = {
     userData: storage.getItem('exampleUserData') || null,
     timestamp: null,
     isLoggedIn: false
        };

로그인 후 복사

action.type이 "LOGIN"인 경우 감속기는 다음을 수행합니다.

function cacheUserData(data) {
  storage.setItem('exampleUserData', JSON.stringify(data));
}

로그인 후 복사

로그아웃 사례
자바스크립트

function myReducer(state = initialState, action) {
  switch(action.type) {
    case "LOGIN":
      cacheUserData(action.payload);
      return {
        userData: action.payload,
        timestamp: Date.now(),
        isLoggedIn: true
      };

    case "LOGOUT" : 
      storage.removeItem('exampleUserData');
      return {
        userData: null,
        timestamp: null,
        isLoggedIn: false
      };  
    default:  
      return state;
  }
};

로그인 후 복사

action.type이 "LOGOUT"인 경우 감속기는 다음을 수행합니다.

function myReducer(state = initialState, action) {
  // ...
}

로그인 후 복사

기본 케이스
자바스크립트

기본값:
반환 상태;

action.type이 위의 경우 중 어느 것과도 일치하지 않으면 리듀서는 아무런 변경 없이 단순히 현재 상태를 반환합니다.
요약하면 이 감속기 기능은 "LOGIN" 및 "LOGOUT" 동작에 응답하여 사용자 로그인 상태를 관리합니다.

마지막으로 다음은 올바른 데이터의 출력으로 사용되는 함수입니다.
중요: 다른 파일에서 사용할 수 있도록 이 기능에 내보내기를 추가해야 했지만 여기서는 단일 파일에 있으므로 그럴 필요가 없습니다. 아래 github 링크를 방문하시면 동일한 기능을 가진 더 큰 프로젝트를 보실 수 있습니다.

사용자 데이터 관리 기능
이 섹션에서는 사용자 데이터 관리에 중요한 역할을 하는 userData.js 함수를 살펴보겠습니다.
userData 함수 코드
자바스크립트:

state: The current state of the application. If no state is provided, it defaults to initialState.
action: An object that describes the action to be performed.

로그인 후 복사

코드 분석
userData 함수를 단계별로 분석해 보겠습니다.
함수 서명
자바스크립트

switch (action.type) {
  // ...
}

로그인 후 복사

이 비동기 함수인 userData는 두 개의 매개변수를 허용합니다.

case "LOGIN":
  cacheUserData(action.payload);
  return {
    userData: action.payload,
    timestamp: Date.now(),
    isLoggedIn: true
  };

로그인 후 복사

사용자 데이터 가져오기
자바스크립트

Calls the cacheUserData function with the action.payload (which contains the user data).
Returns a new state object with the following properties:
    userData: The user data from the action.payload.
    timestamp: The current timestamp.
    isLoggedIn: Set to true.

로그인 후 복사

이 줄은 fetchUserData 함수를 사용하여 지정된 urlLink에서 사용자 데이터를 가져옵니다. wait 키워드는 코드가 계속 진행하기 전에 Promise가 해결될 때까지 기다리도록 합니다.
감속기 호출

자바스크립트:

case "LOGOUT":
  storage.removeItem('exampleUserData');
  return {
    userData: null,
    timestamp: null,
    isLoggedIn: false
  };

로그인 후 복사

이 줄은 myReducer 함수를 호출하여 다음을 전달합니다.

Removes/dete the user data from storage using storage.removeItem.
Returns a new state object with the following properties:
    userData: Set to null.
    timestamp: Set to null.
    isLoggedIn: Set to false.

로그인 후 복사

리듀서는 상태 변수에 할당된 새로운 상태 객체를 반환합니다.
상태 속성 업데이트

자바스크립트:

const userData = async (type) => {

    const userData = await myUserData;
    const state = myReducer(undefined, { type: type, payload: userData });

    state.timeStamp = state.timestamp;
    state.isLoggedIn = state.isLoggedIn;

    return state;
};

로그인 후 복사

이 줄은 상태 개체의 두 가지 속성을 업데이트합니다.

const userData = async (type) => {
  // ...
}

로그인 후 복사

국가 반환
자바스크립트

반환 상태;

마지막으로 이 함수는 업데이트된 상태 객체를 반환합니다.
예제 출력
다양한 작업으로 userData 함수를 호출하면 다음과 같은 출력을 얻습니다.
로그인 데이터:
JSON

urlLink: A URL link used to fetch user data.
type: A string indicating the type of action (e.g., "LOGIN" or "LOGOUT").

로그인 후 복사

로그아웃 데이터:
JSON

const userData = await fetchUserData();

로그인 후 복사

보시다시피 우리 코드는 사용자가 로그아웃할 때 데이터를 제거할 수 있습니다. 또한 타임스탬프를 활용하여 장기간 활동이 없거나 웹사이트 탭이 닫힌 경우 사용자가 자동으로 로그아웃되도록 할 수도 있습니다.

dom 조작을 포함한 전체 코드를 보려면 github 링크를 방문하세요:

https://github.com/TrevoDng/logig-status-monitor-frontend

위 내용은 바닐라 JavaScript 로그인 상태 모니터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!