react实现登录模拟拦截 实现记忆登录前路由登录后重定向到该路由

首先新建一个项目

yarn create vite Login-in --template react

下载 react-router-dom

  npm i react-router-dom

下载相应的包

yarn

重构项目
main.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { BrowserRouter} from 'react-router-dom'
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
)

app.jsx

import Index from './views/Index'
import Detail from './views/Detail'
import Login from './views/Login'
import RequirAuthRoute from './views/RequirAuthRoute'

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

function App() {


  return (
    <div className="App">
        <Routes>
          <Route path="/" element={
            <RequirAuthRoute>
                 <Index></Index>
            </RequirAuthRoute>
          }></Route>

        <Route path="/detail" element={
          <RequirAuthRoute>
              <Detail></Detail>
          </RequirAuthRoute>
        }>
        </Route>
        <Route path="/login" element={<Login></Login>}></Route>
        </Routes>
     
     </div>
  )
}

export default App

在src 下新建/views/Login.jsx

import { useLocation ,useNavigate} from 'react-router-dom'

export default function Login() {
        const navigate  = useNavigate()
        const { state } = useLocation()

         // 获取到RequireAuthRoute组件中跳转登录页上的state
         const returnURL = state?.returnURL || '/'
  return (
    <div>Login
       <button onClick={()=>{
         //设置token
         localStorage.setItem('token',1)
         navigate(returnURL,{replace:true})
       }}>登录</button>
    </div>
  )
}

在src 下新建/views/RequirAuthRoute.jsx

import { Navigate , useLocation } from "react-router"

export default function RequirAuthRoute({children}) {
  //获取到locationStorage中的token
  const token = localStorage.getItem('token')

  //获取location
  const { pathname} = useLocation()
  if(!token){
    return <Navigate to="/login" state={{returnURL:pathname}}></Navigate>
  }
  //如果存在 则渲染标签中的内容
  return children
 
}

该程序可实现 页面未登录跳转到登录页，从哪个页面去登录，登录之后跳转到该页面