React-router-limiter NPM

react-router-limiter

Use to limite url with your config whatever from, like a controller

Usage

基于react-router的场景使用
在数据获取处，进行初始化，使用Limiter.init(list, config, callback)
在App.js入口处的render，使用Limiter.limit(this); this 为react对象
在子页面中使用Limiter.canAccess('path'), 返回波尔值，判断该路径是否能被访问
所有访问的页面的route，都需要加上name属性，并且必须name="oooo=xxxx", 其中xxxx为白名单中可能包括的值
链接或者按钮需要发生跳转或者请求，请务必加上to属性，比如to="oooo=xxxx",指向某个页面或者请求

Limiter.init(list, config, callback)

以下为参数:

list: 用于获取的数据，后续用来根据config排查出最终的白名单
config: 做一些定制化的需求, 包括以下属性
- whiteListKeys: 必传，用于做筛查需要的feature使用，白名单的key值
- whiteElements: 选传，用于增加白名单中的数据
- redirectURL: 选传，如果访问路径不在白名单内，则跳转到该路径，默认为根路径
callback: 回调函数, 传的形参为白名单列表

Limiter.limit(me)

以下为参数:

me: 指向react对象, 最好在App.js入口处加入

    render() {
        var tpl;
        if (this.state) {
            if (this.state.isLogin) {
                // 在整个节点载入前做判断，或者在更早的环节做判断也可以
                RouteLimiter.limit(this);
                tpl = [<Header data={this.state.data} > </Header>,
                    <Menu menuList={this.state.menuList} className="col-8"></Menu>,
                    <div className="page-main-container col-24" >
                        <div className = "page-main-wrapper" >
                            <ReactRouter.RouteHandler />
                        </div>
                    </div>
                ];
            } else {
                tpl = [ <Login onLoginSuccess = {this.onLoginSuccess.bind(this)} > </Login>,];
            }
        } else {
            tpl = null
        }

        return (<div className="main row" style = {{height: '100%'}} > {tpl} </div>);
    }