1、参考文档 React路由详解:
2、嵌套路由思想
将路由封装成组件,逻辑如下
- 需要登录
- 已经登录
- 有权限
- 有子路由----> 递归
- 没有子路由---->直接Route
- 没有权限----> Route到无权限页面
- 有权限
- 没有登录----> Redirect到登录页
- 已经登录
- 不需要登录---->直接 Route 渲染
以下是路由组件的参考:
class PrivateRoute extends React.Component {
util = (routerList) => {
return routerList.map((route, i) => {
if (route.meta && route.meta.require) { //需要登录
// 登录的同时还要 判断我现在的身份和路由权限是否匹配
if (this.props.day4.user.isLogin) {
// 用户已经登录
// 获取登录者的权限 和 页面权限进行比较
const premissicons = this.props.day4.user.premissicons/* 登录者的权限 */
const roles = route.role /* 页面的权限 */
if (roles.includes(premissicons)) {
// 随便进入
if (route.children) {
return <Route key={route.name} path={route.path} render={() =>
<route.component {...this.props}>
{this.util(route.children)}
<Route key={route.name} path={route.path} render={() => <Redirect to={route.redirect} />} />
</route.component>
}>
</Route>
} else {
return <Route key={route.name} exact path={route.path} component={route.component} />
}
} else {
return (<Route key={route.name} path={route.path} component={Quanxian}></Route>)
}
} else {
// 用户没有登录但是想进需要登录页面
return <Redirect key={route.name} to='/Login'></Redirect>
}
} else if (route.redirect) {
return (<Route key={route.name} path={route.path} exact render={() => <Redirect to={route.redirect} />} />)
} else {
return (<Route key={route.name} path={route.path} component={route.component} />)
}
})
}
render() {
let { routerList } = this.props
return (
<HashRouter>
<Switch>
{this.util(routerList)}
</Switch>
</HashRouter>
)
}
}
以下是路由路径编写示例:
export default [ { path: '/', name: '登录1', redirect: '/login', meta: { require: false } }, { path: '/login', name: '登录', component: Login, meta: { require: false } }, { path: '/Main', name: '系统主入口', component: IndexPage, redirect: '/Main/Home', meta: { require: true }, role: ['admin', 'user1', 'user2'],
children: [
{
path: '/Main/Home',
name: '首页',
component: Home,
meta: { require: true },
role: ['admin', 'user1', 'user2']
},
{
path: '/Main/About',
name: '关于我们',
component: About,
meta: { require: true },
role: ['admin', 'user1', 'user2'],
redirect: '/Main/About/Company',
children: [
{
path: '/Main/About/Company',
name: '公司简介',
component: Company,
meta: { require: true },
role: ['admin', 'user1', 'user2'],
},
{
path: '/Main/About/History',
name: '公司历史',
component: History,
meta: { require: true },
role: ['admin', 'user1'],
},
{
path: '/Main/About/Services',
name: '公司服务',
component: Services,
meta: { require: true },
role: ['admin', 'user1', 'user2'],
},
{
path: '/Main/About/Location',
name: '公司地址',
component: Location,
meta: { require: true },
role: ['admin', 'user2'],
},
]
},
{
path: '/Main/Events',
name: '企业事件',
component: Events,
meta: { require: true },
role: ['admin', 'user1', 'user2']
},
{
path: '/Main/Products',
name: '公司产品',
component: Products,
meta: { require: true },
role: ['admin', 'user2']
},
{
path: '/Main/Contact',
name: '联系我们',
component: Contact,
meta: { require: true },
role: ['admin', 'user1']
},
{
path: '/Main/Xiaoshijian',
name: '小事',
component: Xiaoshi,
meta: { require: true },
role: ['admin', 'user1']
},
{
path: '/Main/Huaishi',
name: '坏事',
component: Huaishi,
meta: { require: true },
role: ['admin', 'user2']
},
{
path: '/Main/Haoshi',
name: '好事',
component: Haoshi,
meta: { require: true },
role: ['admin', 'user1']
},
]
},
]
在APP.js中引入如下: