How to set a redirect in CoreUI React Admin Template?-CodePudding

I tried this method in AppHeader.js when a user was not logged in to redirect to Login Page. It's not working when I click on log out, showing Dashboard again.

Log out button onClick method:

        <CDropdownItem
          href=""
          onClick={() => {
            localStorage.setItem('Authenticate', 'false')
          }}
        >
          <CIcon icon={cilLockLocked} className="me-2" />
          Lock Account
        </CDropdownItem>

localStorage working correctly.

AppHeader.js:

const AppHeader = () => {
  const authData = localStorage.getItem('Authenticate')

  if (authData === 'false') {
    return <Redirect from="/" to="/login" />
  }
...

CodePudding user response：

Found the answer. We have to do that in DefaultLayout.js

Full code:

import React from 'react'
import { Redirect } from 'react-router-dom'
import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/index'

const DefaultLayout = () => {
  const authData = localStorage.getItem('Authenticate')

  if (authData === 'false') {
    return <Redirect from="/" to="/login" />
  }
  return (
    <div>
      <AppSidebar />
      <div className="wrapper d-flex flex-column min-vh-100 bg-light">
        <AppHeader />
        <div className="body flex-grow-1 px-3">
          <AppContent />
        </div>
        <AppFooter />
      </div>
    </div>
  )
}

export default DefaultLayout