react的路由守卫，路由鉴权，路由守卫的封装

1.在component下新建一个gradRoute.js的文件，并输入如下内容

import { getToken } from "../API";
import { Navigate } from 'react-router-dom'

export default function GardRoute({ children }) {
   //获取token
  const isToken = getToken()
  if (isToken) {
   //如果有token，那就去往该组件包裹的页面
    return <>{children}</>
  }
  else {
    //跳转去登录页面
    return <Navigate to='/login' replace />
  }
}

2.在路由表下使用

import { Navigate } from 'react-router-dom'
import Login from '../pages/Login'
import Layout from '@/pages/Layout/'
import GardRoute from '../component/gardRoute'

const indexRouter = [
  {
    path: '/layout',
    //这里的layout就是对应的children
    element: <GardRoute><Layout /></GardRoute>,
  },
  {
    path: '/',
    element: <Navigate to='/login' />
  },
  {
    path: '/login',
    element: <Login />
  },
]

export default indexRouter