5 changed files with 278 additions and 27 deletions
@ -0,0 +1,194 @@
|
||||
import { useCallback, lazy, Suspense, useEffect } from 'react'; |
||||
import { useDispatch } from 'react-redux'; |
||||
import { |
||||
BrowserRouter as AppRouter, |
||||
Redirect, |
||||
Route, |
||||
Switch, |
||||
RouteComponentProps |
||||
} from 'react-router-dom'; |
||||
import { useLayout } from '@hooks/useLayout'; |
||||
import { useRouterTransition } from '@hooks/useRouterTransition'; |
||||
import LayoutWrapper from '@layouts/components/layout-wrapper'; |
||||
import BlankLayout from '@layouts/BlankLayout'; |
||||
import HeaderLayout from '@layouts/HeaderLayout'; |
||||
import HorizontalLayout from '@src/layouts/HorizontalLayout'; |
||||
import VerticalLayout from '@src/layouts/VerticalLayout'; |
||||
import * as Actions from '../modules/account/auth/actions'; |
||||
import { Routes } from './routes'; |
||||
import { useSelector } from '@store/storeConfig/store'; |
||||
import { IRoute } from './routes/type'; |
||||
|
||||
const NotAuthorized = lazy(() => import('@src/views/NotAuthorized')); |
||||
const Error = lazy(() => import('@src/views/Error')); |
||||
|
||||
interface IFinalRoute extends RouteComponentProps { |
||||
route: IRoute; |
||||
} |
||||
|
||||
const Router = () => { |
||||
const [layout, setLayout] = useLayout(); |
||||
const [transition, setTransition] = useRouterTransition(); |
||||
const { isLogin } = useSelector(state => state.authState); |
||||
// const isLogin = true;
|
||||
const dispatch = useDispatch(); |
||||
|
||||
useEffect(() => { |
||||
if (!isLogin) { |
||||
dispatch(Actions.check.request()); |
||||
} |
||||
}, [isLogin]); |
||||
|
||||
const DefaultLayout = |
||||
layout === 'horizontal' ? 'HorizontalLayout' : 'VerticalLayout'; |
||||
|
||||
const Layouts = { |
||||
BlankLayout, |
||||
VerticalLayout, |
||||
HorizontalLayout, |
||||
HeaderLayout |
||||
}; |
||||
|
||||
const currentActiveItem = null; |
||||
|
||||
const LayoutRoutesAndPaths = (layout: string) => { |
||||
const LayoutRoutes: IRoute[] = []; |
||||
const LayoutPaths: string[] = []; |
||||
|
||||
if (Routes) { |
||||
Routes.filter(route => { |
||||
if ( |
||||
route.layout === layout || |
||||
(route.layout === undefined && DefaultLayout === layout) |
||||
) { |
||||
LayoutRoutes.push(route); |
||||
LayoutPaths.push(route.path); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
return { LayoutRoutes, LayoutPaths }; |
||||
}; |
||||
|
||||
const FinalRoute = (props: IFinalRoute) => { |
||||
const route = props.route; |
||||
// let action, resource;
|
||||
|
||||
// if (route.meta) {
|
||||
// action = route.meta.action ? route.meta.action : null;
|
||||
// resource = route.meta.resource ? route.meta.resource : null;
|
||||
// }
|
||||
|
||||
if (isLogin === false && !route.meta?.authRoute) { |
||||
return <Redirect to='/account/login' />; |
||||
} else { |
||||
const Component: (props: IFinalRoute) => JSX.Element = |
||||
route.component as (props: IFinalRoute) => JSX.Element; |
||||
// switch (props.route.path) {
|
||||
// case '/account/register':
|
||||
// case '/account/find':
|
||||
// return <Redirect to='/main/dashboard' />;
|
||||
// default:
|
||||
// return <route.component {...props} />;
|
||||
// }
|
||||
|
||||
return <Component {...props} />; |
||||
} |
||||
}; |
||||
|
||||
const ResolveRoutes = useCallback(() => { |
||||
return Object.keys(Layouts).map((layout, index) => { |
||||
const LayoutTag = Layouts[layout]; |
||||
|
||||
const { LayoutRoutes, LayoutPaths } = LayoutRoutesAndPaths(layout); |
||||
const routerProps = {}; |
||||
|
||||
return ( |
||||
<Route path={LayoutPaths} key={index}> |
||||
<LayoutTag |
||||
routerProps={routerProps} |
||||
layout={layout} |
||||
setLayout={setLayout} |
||||
transition={transition} |
||||
setTransition={setTransition} |
||||
currentActiveItem={currentActiveItem} |
||||
> |
||||
<Switch> |
||||
{LayoutRoutes.map(route => { |
||||
return ( |
||||
<Route |
||||
key={route.path} |
||||
path={route.path} |
||||
exact={route.exact === true} |
||||
render={props => { |
||||
Object.assign(routerProps, { |
||||
...props, |
||||
meta: route.meta |
||||
}); |
||||
|
||||
return ( |
||||
<Suspense fallback={null}> |
||||
<LayoutWrapper |
||||
layout={DefaultLayout} |
||||
transition={transition} |
||||
setTransition={setTransition} |
||||
{...(route.appLayout |
||||
? { |
||||
appLayout: route.appLayout |
||||
} |
||||
: {})} |
||||
{...(route.meta |
||||
? { |
||||
routeMeta: route.meta |
||||
} |
||||
: {})} |
||||
{...(route.className |
||||
? { |
||||
wrapperClass: route.className |
||||
} |
||||
: {})} |
||||
> |
||||
<FinalRoute route={route} {...props} /> |
||||
</LayoutWrapper> |
||||
</Suspense> |
||||
); |
||||
}} |
||||
/> |
||||
); |
||||
})} |
||||
</Switch> |
||||
</LayoutTag> |
||||
</Route> |
||||
); |
||||
}); |
||||
}, [Layouts]); |
||||
|
||||
return ( |
||||
<AppRouter basename={process.env.REACT_APP_BASENAME}> |
||||
<Switch> |
||||
<Route |
||||
exact |
||||
path='/' |
||||
render={() => { |
||||
return <Redirect to='/main/dashboard' />; |
||||
}} |
||||
/> |
||||
|
||||
<Route |
||||
exact |
||||
path='/not-authorized' |
||||
render={props => ( |
||||
<Layouts.BlankLayout> |
||||
<NotAuthorized /> |
||||
</Layouts.BlankLayout> |
||||
)} |
||||
/> |
||||
{ResolveRoutes()} |
||||
|
||||
<Route path='*' component={Error} /> |
||||
</Switch> |
||||
</AppRouter> |
||||
); |
||||
}; |
||||
|
||||
export default Router; |
||||
@ -0,0 +1,15 @@
|
||||
import { FC, ReactElement, ReactNode } from 'react'; |
||||
|
||||
interface IRoute { |
||||
component: ReactNode; |
||||
layout?: string; |
||||
meta?: { |
||||
authRoute: boolean; |
||||
}; |
||||
path: string | undefined; |
||||
exact?: boolean; |
||||
appLayout?: string; |
||||
className?: string; |
||||
} |
||||
|
||||
export type { IRoute }; |
||||
Loading…
Reference in new issue