react路由拦截组件

判断是否有Token有则放行，没有则跳转登录页

import { hasToken } from '@/utlis/storage'
import { Route, Redirect, RouteProps } from 'react-router-dom'
//用PrivateRoute 包裹的路由需要token才能访问-----
//<PrivateRoute path ='/home'>
//<home />
//</PrivateRoute>
export const PrivateRoute = ({ children, ...rest }: RouteProps) => {
  return (
  //此时home组件就是这里的children,其他的参数原封不动的还给<Route></Route>（path ='/home'）
    <Route
      {...rest}
      render={(props) => {
     // hasToken()是自己封装的工具用来判断是否有Token 
        if (hasToken()) {
        //有就让他跳转
          return children
        }

        return (
          <Redirect
          //否则就让他重定向到登录页，并且把要跳转的页面地址带回去 以便登录后直接去要访问的页面
            to={{
              pathname: '/login',
              state: {
                from: props.location.pathname // 回跳地址
              }
            }}
          />
        )
      }}
    />
  )
}

登录后跳转到原本要访问的页面

//useLocation拿传回来的参数
const location = useLocation<{ from: string } | undefined>()
// 如果是被拦截回来的，把带回来的url地址拿到
const pathName = location.state?.from
//  有参数就说明是拦截回来的登录直接跳转访问的页面，没参数就直接去home
History.push(pathName || '/home')