여러 탭에서 로그아웃하는 방법 | 반응 웹 앱

실제 시나리오에서는 사이트를 방문하는 사용자가 훌륭한 사용자 경험을 갖기를 원할 것입니다. 반면에 보안은 사용자에게 가장 중요하며 안전한 웹 앱은 "좋은 비즈니스"에 긍정적인 영향을 미치는 사용자 신뢰를 향상시킵니다. 인증이 필요한 웹 사이트에서 사용자의 일반적인 사용 행동은 탐색하거나 거래할 때 여러 탭을 여는 것입니다. 이러한 상황에서 사용자가 모든 탭에서 로그아웃되었는지 여부에 대해 걱정하지 않고 성공적으로 로그인 및 로그아웃할 수 있기를 바랍니다.

이러한 시나리오에서 사용자 경험을 개선하는 방법 중 하나는 사용자가 웹사이트의 탭에서 로그아웃할 때 다른 모든 탭에서 한 번 로그아웃되도록 하는 것입니다. 그런 다음 사용자를 공개 페이지로 리디렉션하고 가능한 경우 로컬 저장소에서 JWT 토큰을 삭제하여 민감한 데이터를 화면에서 제거해야 합니다.

나는 이런 종류의 기능에 대해 초보자에게 친숙한 간단한 예제를 구현했습니다. 계속해서 내가 어떻게했는지 봅시다. 이 작업link으로 이동하여 시작 프로젝트를 로컬 시스템에서 선택한 디렉토리로 다운로드하거나 복제합니다.


시작 프로젝트를 복제한 후 아래와 같은 구조를 가져야 합니다. npm install을 실행하여 종속성을 설치합니다.



터미널에서 이 종속성을 설치하십시오npm i broadcast-channel.
Broadcast Channel API에 대해 자세히 알아보려면 다음 링크로 이동하는 것이 좋습니다.
[ https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API ]
[ https://github.com/pubkey/broadcast-channel ]

브로드캐스트 채널 종속성 설치가 완료되면 터미널에서 npm start를 실행하여 애플리케이션을 시작합니다. 이제 애플리케이션이 포트 3000 또는 구성한 모든 포트에서 실행 중이어야 합니다.



계속해서 로그인 버튼을 클릭하면 대시보드로 이동합니다. 테스트로 현재 탭을 3개 또는 4개 탭으로 복제한 다음 첫 번째 탭으로 돌아가서 로그아웃을 클릭합니다.


보시다시피 이 첫 번째 탭의 로그인 페이지로 이동하지만 다른 탭은 여전히 ​​로그인되어 있습니다(사용자 경험이 좋지 않습니까?). 이 문제를 해결하기 위해 auth 폴더 내의 auth.js 파일에 몇 줄의 코드를 추가합니다.

auth.js 파일의 기존 코드를 아래 코드로 바꾸고 저장합니다.

import history from 'history/browser'
import { BroadcastChannel } from 'broadcast-channel';

const logoutChannel = new BroadcastChannel('logout');

export const login = () => {
    localStorage.setItem("token", "this_is_a_demo_token")
    history.push('/app/dashboard')
}

export const checkToken = () => {
    const token = localStorage.getItem("token", 'this_is_a_demo_token' )
    if(!token) return alert('You are not logged in')
    return token

}

export const logout = () => {
    logoutChannel.postMessage("Logout")
    localStorage.removeItem("token", 'this_is_a_demo_token' )
    window.location.href = window.location.origin + "/";

}

export const logoutAllTabs = () => {
    logoutChannel.onmessage = () => {
        logout();
        logoutChannel.close();


    }
}

여기서 우리가 한 것은 브로드캐스트 채널 모듈을 가져오는 것이었고 인스턴스, logoutChannel 및 "로그아웃"을 생성했습니다. 로그아웃할 때마다 "로그아웃"메시지가 동일한 호스트 및 포트의 다른 탭으로 전송됩니다(호스트는 로컬 시스템 및 포트 3000임).
또한 App.js 파일의 기존 코드를 아래 코드로 바꾸고 저장합니다.

import React, { useEffect } from "react";
import { logoutAllTabs } from "./auth/auth";
import Router from "./routes";


function App() {
useEffect(() => {
 logoutAllTabs()
}, [])


  return (
    <>

     <Router/>

    </>
  );
}

export default App;

이제 다시 시작하고 다른 모든 탭을 닫고 로그인 페이지에 하나를 남겨두고 로그인을 클릭하면 대시보드로 이동합니다. 현재 탭을 3개의 추가 탭으로 복제합니다. 이 단계에서 페이지 중 하나에서 로그아웃하면 열려 있는 다른 모든 탭도 동시에 로그아웃되어야 합니다.



그게 다야!. 이제 자신의 React 애플리케이션에서도 이를 구현할 수 있습니다. 튜토리얼이 유용하다고 생각되면 GitHub에서 별표를 주시거나 Twitter에서 저를 팔로우하세요.