import * as React from 'react';
import {
BrowserRouter,
Switch,
Route,
Redirect
} from 'react-router-dom';
import Login from '../src/component/login/Login';
import Experiment from './component/student/experiment/Experiment';
import ExpterimentDes from './component/student/experiment/ExpterimentDes'
import * as Loadable from "react-loadable";
import './app.css';
const RolesRoute = ({ component: Component, roles: roles, ...rest }: { component: any, roles: string[], path: string }) => (
<Route {...rest} render={(props) => {
let rolesStr = localStorage.getItem('roles'); // ["Admin","SuperAdmin"]
if(!rolesStr){
return <Redirect to='/' />
}
if (roles.indexOf(rolesStr) >= 0) {
return <Component {...props} />
} else {
return <Redirect to='/' />
}
}
} />
);
class App extends React.Component {
public render() {
return (
<div style={{ height: '100%' }}>
<BrowserRouter>
<div style={{ height: '100%' }}>
<Switch>
<Route exact={true} path="/" component={Login} />
<RolesRoute
roles= {["ROLE_ADMIN"]}
path="/management"
component={
Loadable({
loader: () => import('../src/component/management/managementmenu/ManagementMenu'),
loading: () => <div>loading...</div>,
render(loaded, props) {
let Component = loaded.default;
return <Component {...props} />;
}
})} />
<RolesRoute roles= {["ROLE_STUDENT"]} path="/student/experiment/:id" component={Experiment} />
<RolesRoute roles= {["ROLE_STUDENT"]} path="/student/experimentdes/:id" component={ExpterimentDes} />
<RolesRoute
roles= {["ROLE_STUDENT"]}
path="/student"
component={
Loadable({
loader: () => import('../src/component/student/StudentMenu'),
loading: () => <div>loading...</div>,
render(loaded, props) {
let Component = loaded.default;
return <Component {...props} />;
}
})} />
<RolesRoute
roles= {["ROLE_TEACHER"]}
path="/teacher"
component={
Loadable({
loader: () => import('../src/component/teacher/teachermanagement/TeacherManagement'),
loading: () => <div>loading...</div>,
render(loaded, props) {
let Component = loaded.default;
return <Component {...props} />;
}
})} />
</Switch>
</div>
</BrowserRouter>
</div>
);
}
}
export default App;