如何使用 ReactJS 从应用程序中注销用户？

本文的目的是介绍如何设置、注销用户并从 React 应用程序中的本地内存用户浏览器存储中检索数据。在登录会话期间，我们会将用户详细信息保存到浏览器本地存储中，并且在注销期间，我们将从本地存储中删除用户的详细信息。

LocalStorage 是针对本地用户的基于 Web 的数据存储设备，这意味着数据存储在浏览器会话中，并且数据库没有过期日期。通过这个本地存储，我们将执行 Reactjs 应用程序的注销用户。

方法：我们将使用以下步骤：

首先，我们使用 create-react-app 命令创建一个 React 应用程序。
创建 3 个输入字段和 3 个状态来保存数据。
创建一个新状态 isLoggedin 和我们将编写的一些代码。
创建登录和注销函数。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序。

npx create-react-app my-app

第 2 步：创建项目文件夹（即 my-app）后，使用以下命令移动到该文件夹。

cd my-app

第 3 步：使用以下命令运行应用程序。

npm run start

运行这些命令后，您将看到默认的 react web 界面。

项目结构：它看起来像这样。

项目目录

示例：在 App.js 文件中写下以下代码。我们创建了一个包含 3 个输入字段和 3 个状态的表单。我们使用了 isLoggedin 状态，因为它会显示用户是否登录。我们创建了登录和注销功能。

文件名：App.js

Javascript

import { useState } from 'react';
import './App.css';
 
function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLoggedin, setIsLoggedin] = useState(false);
 
  const login = (e) => {
    e.preventDefault();
    console.log(name, email, password);
    const userData = {
      name,
      email,
      password,
    };
    localStorage.setItem('token-info', JSON.stringify(userData));
    setIsLoggedin(true);
    setName('');
    setEmail('');
    setPassword('');
  };
 
  const logout = () => {
    localStorage.removeItem('token-info');
    setIsLoggedin(false);
  };
 
  return (
    <>
      
        This is React WebApp 
        {!isLoggedin ? (
          <>
            
               setName(e.target.value)}
                value={name}
                placeholder="Name"
              />
               setEmail(e.target.value)}
                value={email}
                placeholder="Email"
              />
               setPassword(e.target.value)}
                value={password}
                placeholder="Password"
              />
              
            
          
        ) : (
          <>
            User is logged in
            
          
        )}
      
    
  );
}
 
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm run start

输出：