轻松开发reactSpa项目：mobx数据流，react-router4结合权限处理，webpack4高效开发环境

#33

初学者，非常感谢！

#34

你这个系统，如何添加路由。。。。

#35

一个路由系统，怎么这么复杂。。。

#36

望大神明示。。。

#37

你的项目的前端路由？具体是如何实现的。。。

#38

看routeAndPermissions.js 这个文件

#39

pages文件目录下
myAgent // 代理模块
operationLog // 日志模块
orgAdmin // 机构木块
Home.js // 项目主页面骨架（下面包含子路由也就是myAgent/operationLog/orgAdmin）
SignIn.js // 登陆页面 也是登陆路由

#40

单独看Home.js

{ROUTE_HOME.map(route => { if (G.checkPermission(route.PERMISSIONS)) { // G.checkPermission 全局函数，检测权限判断是否需要加载该路由 // PERMISSIONS 为一个数组包含该模块可能存在的所有权限 // ROUTE_HOME 是一个配置文件，里面包含该路由引入的模块和路径 return ( ) } })}
#41

myAgent
operationLog
orgAdmin
这三个模块下面还有子路由，组织的模式和Home.js相同

#42

对的，我就是改动了这个配置路由的文件
“routeAndPermissions.js”

#43

这个我知道的，这个文件，是来解析，你的项目的前端路由文件的。。。

#44

这个说吧，

我现在想要增加一个页面，

这个页面叫做“OrgLogsDemo”

我现在就是改动routeAndPermissions.js 文件的配置，

还有改动哪里的配置文件？

不好意思，

对于react-router-4，

不太熟悉

#45

这个是操作日志的路由模块，
应该不用做改动吧。

#46

import OrgAdmin from ‘…/pages/org_Admin’
import MyAgent from ‘…/pages/myAgent’
import Logs from ‘…/pages/operationLog’

import ProductInfo from ‘…/pages/org_Admin/productInfo’
import PartnerList from ‘…/pages/org_Admin/PartnerList’
import OrderList from ‘…/pages/org_Admin/orderList’
import CreateOrder from ‘…/pages/org_Admin/createOrder’
import OrderDetail from ‘…/pages/org_Admin/orderDetail’
import Container from ‘…/layouts/Container’

import MyIncome from ‘…/pages/myAgent/myIncome’
import MyPromotion from ‘…/pages/myAgent/myPromotion’
import CreatePromotion from ‘…/pages/myAgent/createPromotion’
import PromotionDetail from ‘…/pages/myAgent/promotionDetail’
import MyInformation from ‘…/pages/myAgent/myInformation’

import OrgLogs from ‘…/pages/operationLog/OrgLogs’
import OrderLogs from ‘…/pages/operationLog/OrderLogs’
import OrgLogsDemo from ‘…/pages/operationLog/OrgLogsDemo’

/**

  • 项目配置说明
  • 1 引入要展示的页面
  • 2 在 PERMISSIONS 中写入该页面的权限 （权限由后端返回，在用户登陆时获取
  • 3 在 SIDE_MENU 配置左侧菜单
  • 4 在 AUTHORITY 配置 Header 权限
  • 5 是否为新模块页面，是则需要陪新的 ROUTE 然后 export
    */

/**

  • 权限列表
    */
    const PERMISSIONS = {
    createOrg: 130001, // 创建机构
    orgList: 130002, // 机构列表
    orderList: 130003, // 订单列表
    myIncome: 120001, // 我的分成
    myPromotion: 120002, // 我的推广
    myInformation: 120003, // 我的信息
    orgLogs: 110001, // 操作日志 机构
    orderLogs: 110002 ,// 操作日志 订单
    orgLogsDemo: 130001, // demo
    }

/**

  • 左侧菜单 需要展示的路由
  • @param {iconType} antd内置图标
  • @param {text} label展示
  • @param {PERMISSIONS} 包含的所有权限 有一个就需要展示
  • @param {children} 子菜单
  • @param {to} 跳转地址
    */
    const SIDE_MENU = {
    orgAdmin: {
    iconType: ‘desktop’,
    text: ‘机构管理’,
    PERMISSIONS: [PERMISSIONS.createOrg, PERMISSIONS.orgList, PERMISSIONS.orderList],
    children: [
    {
    to: ‘/orgAdmin/orgList’,
    text: ‘机构列表’,
    PERMISSIONS: [PERMISSIONS.orgList]
    },
    {
    to: ‘/orgAdmin/orderList’,
    text: ‘订单列表’,
    PERMISSIONS: [PERMISSIONS.orderList]
    }
    ]
    },
    myAgent: {
    iconType: ‘idcard’,
    text: ‘我的代理’,
    PERMISSIONS: [PERMISSIONS.myIncome, PERMISSIONS.myPromotion, PERMISSIONS.myInformation],
    children: [
    {
    to: ‘/myAgent/myIncome’,
    text: ‘我的分成’,
    PERMISSIONS: [PERMISSIONS.myIncome]
    },
    {
    to: ‘/myAgent/myPromotion’,
    text: ‘我的推广’,
    PERMISSIONS: [PERMISSIONS.myPromotion]
    },
    {
    to: ‘/myAgent/myInformation’,
    text: ‘我的信息’,
    PERMISSIONS: [PERMISSIONS.myInformation]
    }
    ]
    },
    logs: {
    iconType: ‘book’,
    text: ‘操作日志’,
    PERMISSIONS: [PERMISSIONS.orgLogs, PERMISSIONS.orderLogs, PERMISSIONS.orgLogsDemo],
    children: [
    {
    to: ‘/logs/orgLogs’,
    text: ‘机构’,
    PERMISSIONS: [PERMISSIONS.orgLogs]
    },
    {
    to: ‘/logs/orderLogs’,
    text: ‘订单’,
    PERMISSIONS: [PERMISSIONS.orderLogs]
    },
    {
    to: ‘/logs/orgLogsDemo’,
    text: ‘Demo_to_test’,
    PERMISSIONS: [PERMISSIONS.orgLogsDemo]
    },
    ]
    }
    }

/**

  • 头部配置
  • 不同页面的Header组件可能有不同功能
  • @param {pageTitle} 页面标题
  • @param {btnText} 左侧跳转按钮文字
  • @param {target} 跳转地址
    */
    const AUTHORITY = {
    createOrder: {
    pageTitle: ‘创建订单’,
    btnText: ‘< 返回’,
    target: ‘/orgAdmin/orderList’
    },
    orderDetail: {
    pageTitle: ‘订单详情’,
    btnText: ‘< 返回’,
    target: ‘/orgAdmin/orderList’
    },
    orderList: {
    pageTitle: ‘’,
    btnText: ‘创建订单’,
    target: ‘/orgAdmin/createOrder’
    },
    myIncome: {
    pageTitle: ‘我的分成’,
    btnText: ‘’,
    target: ‘’
    },
    myPromotion: {
    pageTitle: ‘我的推广’,
    btnText: ‘’,
    target: ‘’
    },
    createPromotion: {
    pageTitle: ‘新增推广’,
    btnText: ‘< 返回’,
    target: ‘/myAgent/myPromotion’
    },
    promotionDetail: {
    pageTitle: ‘推广详情’,
    btnText: ‘< 返回’,
    target: ‘/myAgent/myPromotion’
    },
    applicationSettlement: {
    pageTitle: ‘申请结算’,
    btnText: ‘’,
    target: ‘’
    },
    settlementHistory: {
    pageTitle: ‘结算历史’,
    btnText: ‘’,
    target: ‘’
    },
    myInformation: {
    pageTitle: ‘我的信息’,
    btnText: ‘’,
    target: ‘’
    }
    }

/**

  • 导航路径
  • 例子：机构管理 / 创建机构
    */
    const NAV = {
    createOrg: [‘机构管理’, ‘创建机构’],
    orgList: [‘机构管理’, ‘机构列表’],
    orderList: [‘机构管理’, ‘订单列表’],
    settlementDetail: [‘结算管理’, ‘结算详情’],
    myIncome: [‘我的代理’, ‘我的分成’],
    myPromotion: [‘我的代理’, ‘我的推广’],
    myInformation: [‘我的代理’, ‘我的信息’],
    createPromotion: [‘我的代理’, ‘新增推广’],
    promotionDetail: [‘我的代理’, ‘推广详情’],
    orgLogs: [‘操作日志’, ‘机构’],
    orderLogs: [‘操作日志’, ‘订单’],
    orgLogsDemo: [‘操作日志’, ‘demo’]
    }

/**

  • 以下组件都需要 Container 组件进行增强
  • Container为以下组件提供公共组件部分
  • @param {nav} 路径展示配置
  • @param {component} 需要增强的组件
    */
    const PartnerListWrapper = Container(NAV.orgList)(PartnerList)
    const OrderListWrapper = Container(NAV.orderList)(OrderList)

const MyIncomeWrapper = Container(NAV.myIncome)(MyIncome)
const MyPromotionWrapper = Container(NAV.myPromotion)(MyPromotion)
const CreatePromotionWrapper = Container(NAV.createPromotion)(CreatePromotion)
const PromotionDetailWrapper = Container(NAV.promotionDetail)(PromotionDetail)
const MyInformationWrapper = Container(NAV.myInformation)(MyInformation)

const OrgLogsWrapper = Container(NAV.orgLogs)(OrgLogs)
const OrderLogsWrapper = Container(NAV.orderLogs)(OrderLogs)
const OrgLogsDemoWrapper = Container(NAV.orgLogsDemo)(OrgLogsDemo)

/**

  • 顶级路由
    */
    const ROUTE_HOME = [
    {
    path: ‘orgAdmin’,
    component: OrgAdmin,
    exact: false,
    PERMISSIONS: [PERMISSIONS.createOrg, PERMISSIONS.orgList, PERMISSIONS.orderList]
    },
    {
    path: ‘myAgent’,
    component: MyAgent,
    exact: false,
    PERMISSIONS: [PERMISSIONS.myIncome, PERMISSIONS.myPromotion, PERMISSIONS.myInformation]
    },
    {
    path: ‘logs’,
    component: Logs,
    exact: false,
    PERMISSIONS: [PERMISSIONS.orgLogs, PERMISSIONS.orderLogs, PERMISSIONS.orgLogsDemo ]
    }
    ]

/**

  • 机构管理路由
    */
    const ROUTE_ORGADMIN = [
    {
    path: ‘/orgList’,
    component: PartnerListWrapper,
    exact: true,
    PERMISSIONS: [PERMISSIONS.orgList]
    },
    {
    path: ‘/product/:id’,
    component: ProductInfo,
    exact: true,
    PERMISSIONS: true
    },
    {
    path: ‘/orderList’,
    component: OrderListWrapper,
    exact: true,
    PERMISSIONS: [PERMISSIONS.orderList]
    },
    {
    path: ‘/orderDetail/:id’,
    component: OrderDetail,
    exact: false,
    PERMISSIONS: true
    },
    {
    path: ‘/createOrder’,
    component: CreateOrder,
    exact: false,
    PERMISSIONS: true
    }
    ]

/**

  • 我的代理路由
    */
    const ROUTE_MYAGENT = [
    {
    path: ‘/myIncome’,
    component: MyIncomeWrapper,
    exact: false,
    PERMISSIONS: [PERMISSIONS.myIncome]
    },
    {
    path: ‘/myPromotion’,
    component: MyPromotionWrapper,
    exact: false,
    PERMISSIONS: [PERMISSIONS.myPromotion]
    },
    {
    path: ‘/createPromotion’,
    component: CreatePromotionWrapper,
    exact: false,
    PERMISSIONS: true
    },
    {
    path: ‘/promotionDetail/:id’,
    component: PromotionDetailWrapper,
    exact: false,
    PERMISSIONS: true
    },
    {
    path: ‘/myInformation’,
    component: MyInformationWrapper,
    exact: false,
    PERMISSIONS: [PERMISSIONS.myInformation]
    }
    ]

/**

  • 操作日志路由
    */
    const ROUTE_OPERATIONLOG = [
    {
    path: ‘/orgLogs’,
    component: OrgLogsWrapper,
    exact: false,
    PERMISSIONS: [PERMISSIONS.orgLogs]
    },
    {
    path: ‘/orderLogs’,
    component: OrderLogsWrapper,
    exact: false,
    PERMISSIONS: [PERMISSIONS.orderLogs]
    },
    {
    path: ‘/orderLogsDemo’,
    component: OrgLogsDemoWrapper,
    exact: false,
    PERMISSIONS: [PERMISSIONS.orgLogsDemo]
    }
    ]

export {
ROUTE_HOME,
ROUTE_ORGADMIN,
ROUTE_MYAGENT,
ROUTE_OPERATIONLOG,
PERMISSIONS,
SIDE_MENU,
AUTHORITY
}

这个事react-router-4 的路由配置文件

您看一下，

我觉得我写没写错啊，

项目也没有报错，

就是这个新增加的页面没有办法展现。。。。

抓耳挠腮，

不知道哪里出问题了，

help me ,please…

#47

#48

上图，就是出来的效果。。。

#49

这会电脑不在身边，看起来是没有问题的

#50

。。。。。。就是展现不了我写的demo 页面，
各种泪奔。。。。

#51

感觉挺好的一个脚手架，就是run的时候一直编译不提供，是不是因为在Mac上开发没有主要区分大小写呀

#52

我不太明白你的意思？你能发给我看一下吗？

JavaScript作用域详解