zoukankan      html  css  js  c++  java
  • react16 路由按需加载、路由权限配置

     1. 路由按需加载:

      不做按需加载,代码全部打包在bundle.js 文件里,首屏渲染很慢,项目文件较多,会出现1分钟加载的可能性。

      

    import React, { Component } from 'react';
    import Loadable from 'react-loadable';    // 按需加载依赖包
    import {HashRouter,Route,Switch} from "react-router-dom"
    
    const Loading = () => <div>Loading...</div>;
    
    const A = Loadable({   //A页面 按需加载处理
        loader: () => import('../pages/page1'),
        loading:Loading,
    });
    const B = Loadable({   // B页面 按需加载处理
        loader: () => import('../pages/page2'),
        loading:Loading,
    });
    
    
    class App extends Component {
        render() {
            return (
                <HashRouter>
                    <Switch>
                        <Route exact path={"/a"} component={A}/>   // 加载A组件
                        <Route exact path={"/b"} component={B}/>
                        <Route component={A}/>
                    </Switch>
                </HashRouter>
            );
        }
    }
    
    export default App;
    

      如此简单;

    2.路由权限配置

      场景:后台管理系统,有用户管理(增删改查),订单管理(发货,删除,修改,查看),资金流水(收益查看,提现)等一系列模块,不同身份的人注册登录进来,展示不同的模块;

       思路: (1) 注册登录进来,获取此人的权限,配置相应的路由。(2)浏览器刷新,需重新获取此人的权限,配置路由。

      

    import React, { Component } from 'react';
    import Loadable from 'react-loadable';
    import Permission from "./permission"
    import {HashRouter,Route,Switch} from "react-router-dom"
    
    const Loading = () => <div>Loading...</div>;
    
    const A = Loadable({
        loader: () => import('../pages/page1'),
        loading:Loading,
    });
    const B = Loadable({
        loader: () => import('../pages/page2'),
        loading:Loading,
    });
    
    
    class App extends Component {
        render() {
            return (
                <HashRouter>
                    <Switch>
                        <Route exact path={"/a"} component={A}/>
                        <Route exact path={"/b"} component={B}/>
                        <Route path={"/admin"} component={Permission}/>  //需要权限访问的路由全部放置此组件里处理,permission组件
                        <Route component={A}/> 
                    </Switch>
                </HashRouter>
            );
        }
    }
    
    export default App;
    

      

    permission组件

    import React,{Component} from "react"
    import {getPermissin} from "../actionCreaters"
    import {Route,Switch} from "react-router-dom"
    import {connect} from "react-redux"
    import A from "../pages/page1"
    
    class Permission extends Component{
        render(){
            if(this.props.permissions.length === 0 ){    //权限存储在redux中,如果只在登录或注册获取权限配置,刷新时,将被清空。所以实时的配置路由守卫里,当权限数组为空时,请求接口获取权限
                this.props.requestForPermission();
                return <div>请等待....</div>
            }
            const routers = this.props.permissions.map(item=>{ // 获取到权限进行路由配置
                return <Route exact path={`/admin/${item.code}`} render={()=><div>欢迎{item.code}</div>} key={item.code}/>
            });
            return <Switch>
                {routers}
                <Route component={A}/> //匹配不到此路由,跳转到A组件
            </Switch>;
        }
    }
    export default connect((state)=>{  
        return {
            permissions:state.author.permissions
        }
    },(dispatch)=>{
        return {
            requestForPermission(){
                dispatch(getPermissin());
            }
        }
    })(Permission);
    

      如此简单;

    接下来,什么项目都不怕啦~

      

  • 相关阅读:
    EF 错误解决
    TortoiseHg 学习笔记 (转)
    Mysql 命令行 使用 (转)
    2017-9-3 时间字符串格式化(转)
    2017-8-25 c# 获取url参数的五种方法(转)
    alert 的使用方法
    表单关键字查询写法
    Mysql和Mysqli的区别
    php MySQL中 增、删、改、查的写法格式
    一维、二维数组 与 常用的返回数组 以及 fetch_all与fetch_row的区别
  • 原文地址:https://www.cnblogs.com/changyaoself/p/10320583.html
Copyright © 2011-2022 走看看