How to manage session in React JS Application

 Session is provide global object that store data from one component to another, it is called persistent variable in React JS application.

When we create Login and Logout option in any web application then session implementation is mandatory.

Without session, we can not provide internal page security, 

Syntax to create Session Object in React js application.

sessionStorage.setItem("key",value)

Syntax to get Session Object in React js application.

var s = sessionStorage.getItem("key")

Syntax to remove Session Object in React js application.

sessionStorage.removeItem("key")

Here I am providing one sample application where i have created session object under login success

operation and authenticate session object under dashboard and create logout component to destroy

session.

Code of APP.JS file to manage routing:-

import './App.css';

import React from 'react';

import {Route,Routes,BrowserRouter} from 'react-router-dom'

import Hello from './Hello.js'

import Login from './Login.js'

import Layout from './Layout';

import { FetchExample } from './FetchExample';

import EditCust from './EditCust';

import DeleteCust from './DeleteCust';

import FetchPostAPI from './FetchPostAPI';

import { Logout } from './Logout';

function App() {

  return (

   

       <BrowserRouter>

        <Routes>

        <Route path="/" element={<Layout />}>

         

          <Route path="login" element={<Login />} />

          <Route path="customerdashboard" element={<FetchExample />} />

         

          <Route path="logout"  element={<Logout />} />

         

          </Route>

      </Routes>

    </BrowserRouter>

 

  );

}

export default App;

Create Login.js Component:-

import React from "react";

import axios from "axios";

function Login()

{

 const baseURL = "http://127.0.0.1:5000/login";

 

 const [username, setUsername] = React.useState("");

 const [password, setPassword] = React.useState("");

 const handelInput =(e)=>{

    switch (e.target.id) {

      case "username":

        setUsername(e.target.value)

        break;

        case "password":

          setPassword(e.target.value)

          break;

       

        default:

          break;

    }

}

const changeSubmit =(e)=>{

    e.preventDefault()  

    axios

    .post(baseURL, {

      username: username,

      password: password,

     

    })

    .then((response) => {

        console.log(response.data);

        if(response.data.message == "1")

        {

          sessionStorage.setItem("uid",username)

           window.location='customerdashboard';

        }

        else

        {

            window.location = '/login';

        }

    });  

   }

 

   return(

       <>      

            <form onSubmit={changeSubmit}>

           

           username <input type="text"  id='username'   onChange={handelInput} />

            <br />

             password <input type="text"  id='password'  onChange={handelInput}/>

            <br />

           

            <button type="submit" value="Submit">Submit</button>

        </form>

         

       </>

   );

}

export default Login;

Create FetchExample.js to authenticate session object

import React from "react"

import { Link } from "react-router-dom";

export class FetchExample extends React.Component

{

    constructor()

   {

    super();

    this.state = { tdata:[],udata:'' }

   }

   componentDidMount()

   {

    var s = sessionStorage.getItem("uid")

    if(s === null)

    {

       window.location='/login'

    }

    this.setState({udata:s})

    fetch('http://127.0.0.1:5000/customer')

    .then(res => res.json())

    .then((data) => {

      this.setState({ tdata: data})

      console.log(this.state.tdata)

    }).catch(console.log)

  }

  render()

  {

    return(<div>

      <h1> {this.state.udata} </h1>

      <Link to="/logout">Logout</Link>

        <table boder='1'>

            <tr><th>Name</th><th>mobileno</th><th>Email</th><th>Address</th><th>Edit</th><th>Delete</th></tr>

            {this.state.tdata.map((person,i)=> <TableRow Key={i} data={person} />)}  

        </table>

    </div>)

  }   

}

class TableRow extends React.Component

{

    render()

    {

        return(

       

           <tr>

            <td> {this.props.data.name}</td>

            <td> {this.props.data.mobileno}</td>

            <td> {this.props.data.email}</td>

            <td> {this.props.data.address}</td>

            <td><Link to="/edit" state={this.props.data._id} >Edit</Link></td>

            <td><Link to="/delete" state={this.props.data._id} >Delete</Link></td>

           

        </tr>)

    }

}

Create Logout.js component to destroy session object.

import React from "react"

export class Logout extends React.Component

{

    constructor()

    {

        super();

    }

   componentDidMount()

   {

    var s = sessionStorage.removeItem("uid")

    window.location='/login'   

  }

  render()

  {

    return(<div>

     

    </div>)

  }

   

}