김장현
8 months ago
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