新版旭日权限改造

2017-07-11 本文已影响0人烈日千陽

旭日是搜狗重要的商业广告平台，目前旧版是基于backbone开发，新版则是使用React+redux。
像旭日这种大型的web应用，很多功能都需要区分使用角色，以前的方法是在每个模块需要请求权限时，通过checkPermission接口把模块相关功能的接口名作为参数传给后端，后端依次返回结果，这种异步方式有许多痛点。

异步编程不优雅
每次都通过发请求来获取权限，代码则需要以异步的方式编写，并不优雅，而且代码执行效率很受接口返回速度的约束，页面渲染速度也会受到影响。
请求次数过多
由于旭日平台功能模块很多，每个模块都要请求权限的话，加载页面时得同时发大量checkPermission请求，造成大量网络开销。
比如旭日推广管理页，第一次页面加载就有22个checkPermission请求。

image.png

3.影响页面渲染性能
过多异步请求会严重阻塞页面渲染状态，特别是多个组件串行渲染，需要一级一级等到组件异步请求权限的结果才能继续渲染，渲染性能很差。

改造思路

初始权限的获取
我们开发时使用权限最理想的场景是同步的方式来使用，可是已经不是jsp时代了，我们无法在页面的初始化状态就拿到该角色的所有功能权限，所以我们必须得向后端请求，最好在页面初始化时一次请求完所有的权限，所以我新建了一个配置文件，里面填写了平台所有需要请求的权限参数，后续有需要继续在该配置文件中添加即可，然后一次性的去请求。
页面空白问题
但是这样有个大问题，这样还是异步的方式，而且checkPermission接口在一次性请求过多参数（200+）时，性能极其不稳定，有时候会需要几百ms才返回数据，这样页面会有一段时间明显的白屏，这样的用户体验显然是不可接受的
巧用缓存
由于旭日已经丢下了ie8以下的兼容包袱，我们可以用一些更好的技术来解决业务问题，一个角色的用户并不会经常变化，为什么我们把他存在用户本地呢？所以我将请求回来的权限结果存放在浏览器的localStorage中，这样就可以直接使用缓存中的结果而不需要依靠请求回来的结果了。
权限更正
但是这样还是有明显缺陷的，没法保证用户的权限真的不会改变，即localstorage的结果有可能是错的；而且没有localstorage时的那次的页面长时间空白问题也没有解决。
由于新版旭日是基于react+redux搭建的，我们只要把权限的值作为个props传入页面组件中，那么在权限变化的时候，传入的props发生了变化，页面自动会进行渲染更新成正确权限的状态

完整攻略

所以，下面有了新版旭日权限改造的完整攻略：

配置一个基础的权限值，全为false，即无权限状态，传入应用中作为props，并以此props来判断权限，这样页面可以同步渲染出页面来，即使是错的

      //传入初始化的permission值进入store中，初始值为localstorage中的值或者为空对象
      const store = configureStore({
          permissions: JSON.parse(localStorage.getItem(LocalStoragePKey)) || {} 
      });

在页面初始化时，同时一次全量请求应用所需要的所有权限，在收到结果后与localstorage的值进行对比，如果没有localstorage或者与localstorage的值不一致，则将localstorage更新为正确的结果，并dispatch一个PERMISSION_CHANGED的action出来

Auth.checkURLPermissions(permissions, (ret)=> {
    const permissionMap = {};
    permissions.map((item, index)=>{
        permissionMap[item] = ret[index]
    });
//对比请求结果与localstorage中的值是否相同
    if (localStorage.getItem(LocalStoragePKey) !== JSON.stringify(permissionMap)) {
        localStorage.setItem(LocalStoragePKey, JSON.stringify(permissionMap));
        store.dispatch({type: ACTION_PERMISSIONS_CHANGED, payload: permissionMap});
    } else {
        return;
    }
});

页面各组件在收到PERMISSION_CHANGED的action后，会自动根据新的permission重新渲染相关的页面，页面渲染为正确的状态

//render方法中直接同步使用permission，在permission发生变化时，自动重新执行render方法
render() {
        this.selectArr = this.state.selectArr || [];
        let disabled = this.selectArr.length === 0;
        const {permissions} = this.props;
        return (
            <div styleName="container">
                <div styleName="top-buttons">
                    <span styleName="inline-item">
                        <Button type="minor" onClick={this.doSeizeGoldenPosition.bind(this)}
                                disabled={disabled}>抢占黄金位</Button>
                    </span>
                    {permissions[MONITOR_CREATE_MONITOR_KEY] ?
                        <span styleName="inline-item">
                        <Button type="minor" onClick={this.addMonitorKey.bind(this)}>添加监控关键词</Button>
                    </span> : ''}
                    {permissions[MANAGE_MODIFY_KEY_PRICE] ?
                    <span styleName="inline-item">
                        <Button type="minor" onClick={this.batchModifyKeyPrice.bind(this)}
                                disabled={disabled}>修改出价</Button>
                    </span> : ''}
                    {permissions[MANAGE_MODIFY_KEY_MATCH] ?
                    <span styleName="inline-item">
                        <Button type="minor" onClick={this.doModifyMatchType.bind(this)}
                                disabled={disabled}>修改匹配方式</Button>
                    </span> : ''}
                    {permissions[MANAGE_MODIFY_KEY_IS_PAUSE] ?
                        <span styleName="inline-item">
                        <Button type="minor" onClick={this.statusChange.bind(this, 0)}
                                disabled={disabled}>取消暂停</Button>
                    </span> : ''}
                    {permissions[MANAGE_MODIFY_KEY_IS_PAUSE] ?
                    <span styleName="inline-item">
                        <Button type="minor" onClick={this.statusChange.bind(this, 1)}
                                disabled={disabled}>暂停</Button>
                    </span> : ''}
                    {permissions[MONITOR_STOP_MONITOR_KEY] ?
                    <span styleName="inline-item">
                        <Button type="minor" onClick={this.stopMonitor.bind(this)}
                                disabled={disabled}>停止监控</Button>
                    </span> : ''}
                </div>
            </div>
        );
    }

总结

这样页面就可以无阻塞、快速、正确的渲染，而且开发也可以优雅的以同步方式来使用权限了！

新版旭日权限改造

改造思路

完整攻略

总结

猜你喜欢

热点阅读