You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
179 lines
5.1 KiB
179 lines
5.1 KiB
import { useLayout } from '@hooks/useLayout'; |
|
import { useRouterTransition } from '@hooks/useRouterTransition'; |
|
import BlankLayout from '@layouts/BlankLayout'; |
|
import LayoutWrapper from '@layouts/components/layout-wrapper'; |
|
import HeaderLayout from '@layouts/HeaderLayout'; |
|
import HorizontalLayout from '@src/layouts/HorizontalLayout'; |
|
import VerticalLayout from '@src/layouts/VerticalLayout'; |
|
import { lazy, Suspense, useEffect } from 'react'; |
|
import { useDispatch, useSelector } from 'react-redux'; |
|
import { |
|
BrowserRouter as AppRouter, |
|
Redirect, |
|
Route, |
|
Switch |
|
} from 'react-router-dom'; |
|
import * as Actions from '../modules/account/login/actions/authAction'; |
|
import { Routes } from './routes'; |
|
|
|
const Router = () => { |
|
const [layout, setLayout] = useLayout(); |
|
const [transition, setTransition] = useRouterTransition(); |
|
const { isLogin } = useSelector(state => state.authState); |
|
// const isLogin = true; |
|
const dispatch = useDispatch(); |
|
|
|
useEffect(() => { |
|
console.log('isLogin>>>>>>>>', isLogin); |
|
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 => { |
|
const LayoutRoutes = []; |
|
const LayoutPaths = []; |
|
|
|
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 NotAuthorized = lazy(() => import('@src/views/NotAuthorized')); |
|
|
|
const Error = lazy(() => import('@src/views/Error')); |
|
|
|
const FinalRoute = props => { |
|
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 { |
|
return <route.component {...props} />; |
|
} |
|
}; |
|
|
|
const ResolveRoutes = () => { |
|
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> |
|
); |
|
}); |
|
}; |
|
|
|
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;
|
|
|