旭日是搜狗重要的商业广告平台，目前旧版是基于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>
);
}
总结
这样页面就可以无阻塞、快速、正确的渲染，而且开发也可以优雅的以同步方式来使用权限了！
网友评论