前端如何根据不同权限分割逻辑代码?(state/method)

吾辈写了一个简单的示例代码说明目前遇到的困境(虽然是 react 不过框架之间原理是相通的),其实就是组件内的代码在某个权限下才会执行,但是又依赖于组件内的一些状态,如何将这些代码分割到不同的地方(例如不同的文件)便于之后的维护。

image.png
image.png
image.png

这个例子里面有两种角色,normal/vip,普通用户可以试用 vip 的功能,vip 角色不能出现普通用户的试用功能,从功能上看很好实现,但问题在于如何将这些互相耦合的代码分割,理想情况是在进入页面初始化时就确定要加载的 state/methods 了。

image.png

虽然这里只有两种角色,但吾辈丝毫不怀疑真实场景会有更多,当然真实场景是角色下面还有权限,某些东西是角色所属的(只要是这个角色就一定有),而有些则是权限所属(必须拥有某个权限)

那么,移动端有什么优雅的方式将这种与权限相关但相互存在关联的代码(state/method)分离么?

具体代码在:https://github.com/rxliuli/ad...


下面使用类的形式实现了代码分割,但似乎并没有更加简单。。。

image.png

具体代码在:https://github.com/rxliuli/ad...

阅读 516
评论
    1 个回答
    • 12.2k
    1. 大体上,你只需要考虑界面上有区分即可。代码拆分价值不大,毕竟压缩后最多十几K,对加载速度和响应速度的影响都微乎其微,但是要花时间设计代码结构。
    2. 非得要做,可以考虑 webpack lazyload 功能,分拆模块为不同文件。
      撰写回答

      登录后参与交流、获取后续更新提醒