React登录拦截

1.main.js:

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')
)

2.app.js:

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

3.在src 下新建/views/Login.js:

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>
  )
}

4.在src 下新建/views/RequirAuthRoute.js:

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
 
}