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,有没有一种方法是可以同步?现在明显是先白屏然后加载了组件

阅读 4k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进