多个 vue.js 做的后台集中到一起展示并鉴权 的实现思路？

[justfly]

我的需求大概是这样的：

1. 公司有很多的子系统 （ A, B, C, ...)
2. 每个子系统都会有一个 vue 项目做配置后台
3. 让这些子系统后台可以根据权限动态展示到一个项目中 ( 如某人有 A.1 A.2 B.1 C.2 三个系统 4 个权限)

这样的好处是维护人员不用频繁的切系统，更直观。

这就需要这个总的 vue 项目可以根据用户权限动态加载子系统 vue 项目的 component，动态增加路由。

我的思路：动态路由的增加还好说，有现成的 API。但是动态加载其他系统的 component，需要新页面在这里注册一下，指明页面的 vue 单文件组件 文件所在的 URL，用户访问到时，获取该组件并渲染。

问题是：目前的 vue 异步组件并不支持加载任意一个位置的 vue 组件，组件要么整体打包在一个 js 里面被浏览器一次性加载，要么用 require 语法让 webpack 给分隔好放在服务器，懒加载。这两种都必须要求所有子系统前端维护成一个大项目，这样开发部署都会牵一发动全身，不想这样实现。

各位有什么好办法，或者这个思路有问题？感觉这个问题还是一个蛮普遍的问题。

[wangxiaoer]

为啥要把老的组件融起来？开一个新的页面（项目），权限判断好之后直接跳转到老的现成的页面不行吗？

[justfly]

@wangxiaoer 你是说用 iframe?

[IJustmaogepao]

他的意思应该是直接跳地址吧，类似新做个页面类似导航

[wangxiaoer]

@justfly 跟 frame 关系不大，就是类似 @IIJustmaogepao 说的根据用户身份生成的导航页，跳到对应原有的页面。

当然，如果原有配置页面风格不同，而你又想统一的话，可能需要 frame 这种办法，再加上 js 做些手脚（比如把原有页面的页头、页脚去掉）啥的。

[wangxiaoer]

即使采用你原有的思路，我觉得动态路由也是没有必要的，只需要按照用户身份隐藏、显示对应的操作入口就行。因为权限的判定肯定要后端做的。

上面说的跳转可能遇到的问题就是各个系统有各自的地址、各自的验证接口，这样难点反倒在于单点登录，不过我想这个应该可以通过反向代理解决吧。

[justfly]

@wangxiaoer 谢谢你的想法。

设计中是有一个单点的鉴权系统的，前端根据鉴权结果决定哪些入口不显示，后端 API 都跟鉴权系统交互判断权限。

跳各个子系统是没有问题的。而我想的是这个系统的 「边栏」 显示用户所拥有的各个子系统权限的汇总，右边局部渲染子系统的页面，不需要跳来跳去，给人感觉是一个独立的项目。如果只是一个导航页，用户就会在不同站点之间切换，每个站点就算风格统一，边栏的菜单列表也不尽相同，给用户的感觉不如第一种好

[wangxiaoer]

@justfly 那就 iframe 最简单暴力。

新的页面设计好，比如边栏放权限汇总菜单之类，这是新功能，不冲突。右边根据用户操作把原有页面塞到 iframe 里面，这种情况下可能原有页面本身带有边栏、页脚啥的，这就是我说的可能需要 js 做一点手脚，把这些无关的干掉。这里面涉及到同源策略，但是我想反代应该可行。