react 路由权限

import {  Spin } from "antd";
import { Suspense } from "react";
import { Navigate } from "react-router-dom";
import KeepAlive from 'react-activation'
function AuthRoute(props: any) {
    const spinStyle = {
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    }
    const token = localStorage.getItem("token");

    let template = <Navigate to='/' replace></Navigate>;

    if (token || !props.auth) {
        if (props.id) {
            template = <KeepAlive autoFreeze={false} when={true} key={props.id} id={props.id}>
                <Suspense fallback={<div style={spinStyle}><Spin /></div>}>{props.children}</Suspense>
            </KeepAlive>
        } else {
            template = <Suspense fallback={<div style={spinStyle}><Spin /></div>} >{props.children}</Suspense>
        }

    }
    return template
}
export default AuthRoute

使用方式