import { getToken } from '@/utils/tokenApi'
import { Redirect, Route, RouteProps, useLocation } from 'react-router-dom'
interface PrivateRouteType extends RouteProps {
  component: any
}
// children传入组件  component标签传组件
function PrivateRoute({
  children,
  component: Component,
  ...rest
}: PrivateRouteType) {
  const location = useLocation()
  return (
    <Route
      {...rest}
      render={() => {
        //  查看本地是否有token 获取token
        const token = getToken()

        // 如果有 就去传递过来的组件
        if (token.token) {
          return children ? children : <Component></Component>
        } else {
          // 没有就去login state/from 记录拦截下来的地址 用于回调
          return (
            <Redirect
              to={{
                pathname: '/login',
                // state传参
                state: { form: location.pathname },
              }}
            ></Redirect>
          )
        }
      }}
    />
  )
}

export default PrivateRoute
最后修改:2022 年 05 月 02 日
END
本文作者:
文章标题:基于React在TypeScript环境下路由前置守卫封装
本文地址:https://zhougewk8.cn/12.html
版权说明:若无注明,本文皆Dg's Blog-专注健康快乐每一天原创,转载请保留文章出处。
如果觉得我的文章对你有用,请随意赞赏