react-router-config路由拦截问题

发布于 2022-09-11 19:46:17 字数 2301 浏览 12 评论 0

使用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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文