How to disable user to access login/register page once they login?-CodePudding

How can I prevent the user to go to login page once they logged in, I've already managed to force the user to log in before accessing the home page, but I'm having a problem with, the user can still manage to login page even though he/she already login,

Protected.jsx

import React from 'react'
import {Outlet, Navigate} from 'react-router-dom'
import { useSelector } from 'react-redux'

const Protected = ({children, ...rest}) => {
  const item = JSON.parse(localStorage.getItem('user'))
  const token = item?.accessToken
  console.log(token)  

  return (
    token ? <Outlet /> : <Navigate to="/login" />
  )

}

export default Protected

App.js

function App() { 

  
 return(
  <Router>
    <Routes>
    
      <Route element={<Protected />}>
          <Route element={<Home />} path="/" exact />
          <Route path="/myproducts" element={ <MyProducts /> } />
          <Route path="/products/:category"  element={ <ProductContent />} />
          <Route path="/sell" element={ <Sell  />} />
          <Route path="/myproducts/" element={ <MyProducts /> } />
          <Route path="/singleproduct/:id" element={<SingleProduct />} />
          <Route path="/editproduct/:id" element={<EditProduct />} />
      </Route>

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



    </Routes>
  <ToastContainer />
</Router>
 )
}

export default App

CodePudding user response：

Create an anonymous route component that applies the inverse logic of the protected route component. If the user is already authenticated then bounce them to any non-"login" route.

const Anonymous = () => {
  const item = JSON.parse(localStorage.getItem('user'));
  const token = item?.accessToken;

  return token ? <Navigate to="/" replace /> : <Outlet />;
}

...

<Router>
  <Routes>
    <Route element={<Protected />}>
      <Route path="/" element={<Home />} />
      <Route path="/myproducts" element={<MyProducts />} />
      <Route path="/products/:category" element={<ProductContent />} />
      <Route path="/sell" element={<Sell />} />
      <Route path="/myproducts/" element={<MyProducts />} />
      <Route path="/singleproduct/:id" element={<SingleProduct />} />
      <Route path="/editproduct/:id" element={<EditProduct />} />
    </Route>
    <Route element={<Anonymous />}>
      <Route path="/register" element={<Register />} />
      <Route path="/login" element={<Login />} />
    </Route>
  </Routes>
</Router>

CodePudding user response：

Thanks @Drew Reese, I can't tag you , I follow your recommendation

import React from 'react'
import {Outlet, Navigate} from 'react-router-dom'

const Anonymous = () => {
    const item = JSON.parse(localStorage.getItem('user'))
    const token = item?.accessToken
    console.log(token)  
  
    return (
      token ? <Navigate to="/" /> : <Outlet />
    )
}

export default Anonymous