typescript处理角色认证以及路由的使用

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;