• private路由(v1.0.0发版)


    说明

    通过使用 /private 路由来免登陆访问页面;

    采用private路由实现的页面需在路径上拼上token。

    http://localhost:8000/private/hiam/private-demo?access_token=3a4e4dd9-9001-4e6e-8a01-3c03074ea335

    使用

    1.定义路由

    根据 hzero 路由定义方式定义路由,需要在path 上加入 /private前缀,例如

      {
       path: "/private/hpfm/config",
       key: "/private/hpfm/config",
       authorized: true,
       component: "Config",
       models: [
         "config",
       ],
     },
    

    若已定义路由却没有效果,请检查根目录 src/router.js 是否加入对应路由

    ...
    // 免登陆权限路由
    const PrivateLayout = dynamicWrapper(app, [], () =>
     import('hzero-front/lib/layouts/PrivateLayout')
    );
    ...
    <Route path="/private" render={props => <PrivateLayout {...props} />} />
    ...
    

    2.开发页面

    页面的开发方式保持不变。

    index.js

      import React from 'react';
      import { connect } from 'dva';
      import { Table } from 'hzero-ui';
      import { Bind } from 'lodash-decorators';
    
      import { Content, Header } from 'components/Page';
    
      import FilterForm from './FilterForm';
    
      @connect(({ loading, privateDemo }) => ({
        fetchLoading: loading.effects['privateDemo/fetchData'],
        privateDemo,
      }))
      export default class PrivateDemo extends React.Component {
        filterForm;
    
        componentDidMount() {
          this.fetchList();
        }
    
        fetchList(params = {}) {
          const {
            dispatch,
            privateDemo: { pagination = {} },
          } = this.props;
          const filterValue = this.filterForm === undefined ? {} : this.filterForm.getFieldsValue();
          dispatch({
            type: 'privateDemo/fetchData',
            payload: { page: pagination, ...filterValue, ...params },
          });
        }
    
        @Bind()
        handleSearch() {
          this.fetchList({ page: {} });
        }
    
        @Bind()
        handleBindRef(ref) {
          this.filterForm = (ref.props || {}).form;
        }
    
        @Bind()
        handleResetSearch() {
          this.filterForm.resetFields();
        }
    
        /**
      * handlePagination - 分页设置
      * @param {object} pagination - 分页对象
      */
        @Bind()
        handlePagination(pagination) {
          this.fetchList({ page: pagination });
        }
    
        render() {
          const { fetchLoading = false, privateDemo: { data = [] } = {}, pagination = {} } = this.props;
          const columns = [
            {
              title: 'ID',
              dataIndex: 'id',
              width: 100,
            },
            {
              title: '客户端名',
              dataIndex: 'clientName',
            },
          ];
          return (
            <React.Fragment>
              <Header title="前端免登陆示例" />
              <Content>
                <div className="table-list-search">
                  <FilterForm
                    onSearch={this.handleSearch}
                    onReset={this.handleResetSearch}
                    onRef={this.handleBindRef}
                  />
                </div>
                <Table
                  bordered
                  loading={fetchLoading}
                  rowKey="id"
                  columns={columns}
                  dataSource={data}
                  pagination={pagination}
                  onChange={this.handlePagination}
                />
              </Content>
            </React.Fragment>
          );
        }
      };
    

    FilterForm.js

    import React from 'react';
    import { Form, Button, Input } from 'hzero-ui';
    import { Bind } from 'lodash-decorators';
    
    import intl from 'utils/intl';
    
    const FormItem = Form.Item;
    
    @Form.create({ fieldNameProp: null })
    export default class FilterForm extends React.PureComponent {
    constructor(props) {
      super(props);
      // 调用父组件 props onRef 方法
      props.onRef(this);
    }
    
    /**
     * 查询操作
     */
    @Bind()
    handleSearch() {
      const { form, onSearch } = this.props;
      onSearch(form);
    }
    
    /**
     * 重置操作
     */
    @Bind()
    handleReset() {
      const { form, onReset } = this.props;
      onReset(form);
    }
    
    render() {
      const { form } = this.props;
      const { getFieldDecorator } = form;
      return (
        <Form layout="inline">
          <FormItem label="客户端名">
            {getFieldDecorator('param')(<Input />)}
          </FormItem>
          <FormItem>
            <Button style={{ marginRight: 8 }} onClick={this.handleReset}>
              {intl.get('hzero.common.button.reset').d('重置')}
            </Button>
            <Button type="primary" htmlType="submit" onClick={this.handleSearch}>
              {intl.get('hzero.common.button.search').d('查询')}
            </Button>
          </FormItem>
        </Form>
      );
    }
    }