路由守卫

yarn add react-cookies -S

定义路由验证文件

// src/routers/auth.js 

import React from 'react'
import {useNavigate} from 'react-router-dom'
import cookie from 'react-cookies'

class AuthRouter extends React.Component{
  constructor(props)
  {
    super(props)

    this.state = {}
  }

  render()
  {
    const AuthLogin = () =>
    {
      let navigate = useNavigate()
      React.useEffect(() => {
        var LoginUser = cookie.load('LoginUser') ? cookie.load('LoginUser') : {}
        if(JSON.stringify(LoginUser) === "{}")
        {
          navigate('/user/base/login')
        }
      })

      return false
    }

    return (
      <> 
        {
          this.props.auth && <AuthLogin />
        }
        {this.props.component}
      </>
    )
  }
}

export default AuthRouter

路由入口封装文件中的使用方式

// src/routers/index.js

import React from 'react'
import {Routes, Route, Outlet} from 'react-router-dom'
import AuthRouter from './auth'
import Home from '@/components/home.js'

// 引入每个目录下面的index.js文件
const ModulesFile = require.context('./',true,/index.js$/)

// 总路由集合
const RouterMap = []

//对引入的文件进行循环
ModulesFile.keys().reduce((modules, modulePath) => {

  // 路由模块名称   文件夹/index  user/index
  const ModuleName = modulePath.replace(/^.\/(.*)\.js/,'$1')

  //不包含当前index.js 文件
  if(ModuleName !== 'index')
  {
    //路由列表
    const ModuleList = ModulesFile(modulePath)

    //追加到数组
    RouterMap.push(...ModuleList.default)
  }

  return RouterMap
}, {})


class RouterList extends React.Component{
  constructor(props)
  {
    super(props)

    this.state = {}
  }

  render()
  {
    return (
      <>
        <Routes>
          {/* 默认首页 */}
          <Route path="/" element={<Home />}></Route>

          <Route path="/" element={<><Outlet /></>}>
            {
              RouterMap.map((item, index) => {
                return (
                  <Route key={index} path={item.path} element={<AuthRouter auth={item.auth} component={<item.component />}></AuthRouter>}>
                    {item.children &&
                      item.children.map((son, idx) => <Route key={idx} path={son.path} element={<AuthRouter auth={son.auth} component={<son.component />}></AuthRouter>}></Route>)
                    }
                  </Route>
                )
              })
            }
          </Route>
        </Routes>
      </>
    )
  }
}

export default RouterList

路由的结构

/**
 * 用户基本资料路由 - 子路由
 */
const base = [
  {
    path: "base/profile",
    name: 'profile',
    component: profile,
    auth: true  //判断是否要登陆权限
  },
  {
    path: "base/login",
    name: 'login',
    component: login,
  }
]

export default base