react-router-config路由拦截问题
使用react-router-config配置了下面的信息
import React from 'react'
import { Redirect } from 'react-router'
import Layout from '@/views/Layout/index'
import Root from '@/views/Layout/root'
import RouterControl from '@/router/routerControl'
import notFound from '@/views/Layout/404'
import Forbidden from '@/views/Layout/forbidden'
const _import = require('@/utils/import_' + process.env.NODE_ENV)
const routes = [
{
component: Root,
children: [
{
path: '/',
exact: true,
component: () => <Redirect to="/home"/>
},
{
path: '/404',
component: notFound
},
{
path: '/403',
component: Forbidden
},
{
component: Layout,
children: [
{
path: "/home",
component: _import('Home/index')
},
{
path: "/other",
meta: {
auth: 'fefeqq'
},
component: 'other/index',
render: (props) => <RouterControl {...props} />
},
{
path: '*',
component: () => <Redirect to="/404"/>
}
]
}
]
}
]
export default routes
routerConfig.js
// 路由拦截处理
import React, { Component } from 'react'
import { Redirect } from 'react-router'
const _import = require('@/utils/import_' + process.env.NODE_ENV)
class RouterControl extends Component {
constructor(props) {
super(props)
this.state = {permission: []}
}
permisson = () => {
setTimeout(() => {
this.setState({
permission: ['a', 'fefeqq']
})
}, 2000)
}
componentDidMount() {
this.permisson()
}
render() {
const { meta, component } = this.props.route
const LoadComponent = _import(component)
return (
<div>
{this.state.permission.length > 0 ? this.state.permission.some(items => items === meta.auth) ? <LoadComponent {...this.props} /> : <Redirect to="/403"/> : null }
</div>
)
}
}
export default RouterControl
通过setTimeout来模拟接口返回的权限列表,路由调到other一开始是没有东西的,然后过了秒数之后才调到other,有没有一种方法是可以同步?现在明显是先白屏然后加载了组件
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论