김장현
8 months ago
5 changed files with 190 additions and 195 deletions
@ -1,194 +0,0 @@ |
|||||||
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,28 @@ |
|||||||
|
import { Redirect, RouteComponentProps } from 'react-router-dom'; |
||||||
|
import { useSelector } from '@store/storeConfig/store'; |
||||||
|
import { IRoute } from '../routes/type'; |
||||||
|
|
||||||
|
interface IFinalRoute extends RouteComponentProps { |
||||||
|
route: IRoute; |
||||||
|
} |
||||||
|
|
||||||
|
export default function AuthRoutes(props: IFinalRoute) { |
||||||
|
const { isLogin } = useSelector(state => state.authState); |
||||||
|
const a = useSelector(state => state); |
||||||
|
|
||||||
|
if (isLogin === false && !props.route.meta?.authRoute) { |
||||||
|
return <Redirect to='/account/login' />; |
||||||
|
} else { |
||||||
|
const Component: (props: IFinalRoute) => JSX.Element = props.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} />; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,121 @@ |
|||||||
|
import { Suspense, useEffect } from 'react'; |
||||||
|
import { Route, Switch } from 'react-router-dom'; |
||||||
|
import { useDispatch } from 'react-redux'; |
||||||
|
import BlankLayout from '@layouts/BlankLayout'; |
||||||
|
import HeaderLayout from '@layouts/HeaderLayout'; |
||||||
|
import HorizontalLayout from '@src/layouts/HorizontalLayout'; |
||||||
|
import VerticalLayout from '@src/layouts/VerticalLayout'; |
||||||
|
import { useLayout } from '@hooks/useLayout'; |
||||||
|
import { useRouterTransition } from '@hooks/useRouterTransition'; |
||||||
|
import LayoutWrapper from '@layouts/components/layout-wrapper'; |
||||||
|
import { IRoute } from '../routes/type'; |
||||||
|
import { Routes } from '../routes'; |
||||||
|
import AuthRoutes from './AuthRoutes'; |
||||||
|
import * as Actions from '../../modules/account/auth/actions'; |
||||||
|
|
||||||
|
export default function ResolveRoutes() { |
||||||
|
const [layout, setLayout] = useLayout(); |
||||||
|
const [transition, setTransition] = useRouterTransition(); |
||||||
|
|
||||||
|
const dispatch = useDispatch(); |
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// if (!isLogin) {
|
||||||
|
// dispatch(Actions.check.request());
|
||||||
|
// }
|
||||||
|
// }, [isLogin]);
|
||||||
|
|
||||||
|
const DefaultLayout = |
||||||
|
layout === 'horizontal' ? 'HorizontalLayout' : 'VerticalLayout'; |
||||||
|
|
||||||
|
const Layouts = { |
||||||
|
BlankLayout, |
||||||
|
VerticalLayout, |
||||||
|
HorizontalLayout, |
||||||
|
HeaderLayout |
||||||
|
}; |
||||||
|
|
||||||
|
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 }; |
||||||
|
}; |
||||||
|
|
||||||
|
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={null} |
||||||
|
> |
||||||
|
<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 |
||||||
|
} |
||||||
|
: {})} |
||||||
|
> |
||||||
|
<AuthRoutes route={route} {...props} /> |
||||||
|
</LayoutWrapper> |
||||||
|
</Suspense> |
||||||
|
); |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
})} |
||||||
|
</Switch> |
||||||
|
</LayoutTag> |
||||||
|
</Route> |
||||||
|
); |
||||||
|
}); |
||||||
|
} |
@ -0,0 +1,40 @@ |
|||||||
|
import { lazy } from 'react'; |
||||||
|
import { |
||||||
|
BrowserRouter as AppRouter, |
||||||
|
Redirect, |
||||||
|
Route, |
||||||
|
Switch |
||||||
|
} from 'react-router-dom'; |
||||||
|
import BlankLayout from '@layouts/BlankLayout'; |
||||||
|
import ResolveRoutes from './hoc/ResolveRoutes'; |
||||||
|
|
||||||
|
const NotAuthorized = lazy(() => import('@src/views/NotAuthorized')); |
||||||
|
const Error = lazy(() => import('@src/views/Error')); |
||||||
|
|
||||||
|
export default function Router() { |
||||||
|
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 => ( |
||||||
|
<BlankLayout> |
||||||
|
<NotAuthorized /> |
||||||
|
</BlankLayout> |
||||||
|
)} |
||||||
|
/> |
||||||
|
{ResolveRoutes()} |
||||||
|
<Route path='*' component={Error} /> |
||||||
|
</Switch> |
||||||
|
</AppRouter> |
||||||
|
); |
||||||
|
} |
Loading…
Reference in new issue