{"id":3451,"date":"2024-11-09T21:15:12","date_gmt":"2024-11-09T18:15:12","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/reactte-kullaniciyi-tum-sekmelerde-ayni-anda-cikis-yapmaya-zorlamak\/"},"modified":"2024-11-09T21:15:12","modified_gmt":"2024-11-09T18:15:12","slug":"reactte-kullaniciyi-tum-sekmelerde-ayni-anda-cikis-yapmaya-zorlamak","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-kullaniciyi-tum-sekmelerde-ayni-anda-cikis-yapmaya-zorlamak\/","title":{"rendered":"React’te Kullan\u0131c\u0131y\u0131 T\u00fcm Sekmelerde Ayn\u0131 Anda \u00c7\u0131k\u0131\u015f Yapmaya Zorlamak"},"content":{"rendered":"

React’te Kullan\u0131c\u0131y\u0131 T\u00fcm Sekmelerde Ayn\u0131 Anda \u00c7\u0131k\u0131\u015f Yapmaya Zorlamak<\/p>\n

Bir web uygulamas\u0131 geli\u015ftirirken, kullan\u0131c\u0131lar\u0131n t\u00fcm a\u00e7\u0131k sekmelerde ayn\u0131 anda oturumlar\u0131n\u0131 kapatma ihtiyac\u0131 duyabilece\u011finiz durumlar olabilir. Bu, \u00f6rne\u011fin kullan\u0131c\u0131 \u015fifresini de\u011fi\u015ftirdi\u011finde veya g\u00fcvenlik nedeniyle oturumlar\u0131n\u0131 kapatmak istedi\u011finde olabilir. Bu makalede, React’te bir kullan\u0131c\u0131n\u0131n t\u00fcm sekmelerde ayn\u0131 anda oturumunu nas\u0131l kapatabilece\u011finizi ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n

Local Storage’\u0131 Kullanarak Oturum Durumunu Y\u00f6netme<\/h2>\n

Bir kullan\u0131c\u0131n\u0131n t\u00fcm sekmelerde ayn\u0131 anda oturumunu kapatabilmek i\u00e7in, oturum durumunu t\u00fcm sekmelerde senkronize etmemiz gerekir. Bunu yapmak i\u00e7in en etkili y\u00f6ntemlerden biri, taray\u0131c\u0131 yerel depolama alan\u0131n\u0131 (Local Storage) kullanmakt\u0131r. Yerel depolama alan\u0131, taray\u0131c\u0131 taraf\u0131ndan sa\u011flanan k\u00fc\u00e7\u00fck bir veritaban\u0131d\u0131r ve her sekme ve pencere aras\u0131nda payla\u015f\u0131labilir.<\/p>\n

\u0130lk olarak, uygulaman\u0131zda bir “oturum a\u00e7\u0131k” de\u011fi\u015fkeni tan\u0131mlayarak ba\u015flayabilirsiniz. Bu de\u011fi\u015fken, kullan\u0131c\u0131 oturum a\u00e7t\u0131\u011f\u0131nda true ve oturum kapatt\u0131\u011f\u0131nda false de\u011ferine ayarlanacakt\u0131r.<\/p>\n

“`javascript
\nimport React, { useState, useEffect } from ‘react’;<\/p>\n

function App() {
\n const [isLoggedin, setIsLoggedin] = useState(false);<\/p>\n

useEffect(() => {
\n \/\/ Yerel depolama alan\u0131ndan oturum durumunu al\u0131n
\n const storedIsLoggedin = localStorage.getItem(‘isLoggedIn’);
\n if (storedIsLoggedin) {
\n setIsLoggedin(JSON.parse(storedIsLoggedin));
\n }
\n }, []);<\/p>\n

useEffect(() => {
\n \/\/ Yerel depolama alan\u0131na oturum durumunu kaydedin
\n localStorage.setItem(‘isLoggedIn’, JSON.stringify(isLoggedin));
\n }, [isLoggedin]);<\/p>\n

const handleLogout = () => {
\n setIsLoggedin(false);
\n };<\/p>\n

return (<\/p>\n

\n {isLoggedin ? (
\n