我的需求大概是这样的:
这样的好处是维护人员不用频繁的切系统,更直观。
这就需要这个总的 vue 项目可以根据用户权限动态加载子系统 vue 项目的 component,动态增加路由。
我的思路:动态路由的增加还好说,有现成的 API。但是动态加载其他系统的 component,需要新页面在这里注册一下,指明页面的 vue 单文件组件 文件所在的 URL,用户访问到时,获取该组件并渲染。
问题是:目前的 vue 异步组件并不支持加载任意一个位置的 vue 组件,组件要么整体打包在一个 js 里面被浏览器一次性加载,要么用 require 语法让 webpack 给分隔好放在服务器,懒加载。这两种都必须要求所有子系统前端维护成一个大项目,这样开发部署都会牵一发动全身,不想这样实现。
各位有什么好办法,或者这个思路有问题?感觉这个问题还是一个蛮普遍的问题。
1
wangxiaoer 2017-07-06 15:22:16 +08:00
为啥要把老的组件融起来?开一个新的页面(项目),权限判断好之后直接跳转到老的现成的页面不行吗?
|
2
justfly OP @wangxiaoer 你是说用 iframe?
|
3
IJustmaogepao 2017-07-06 15:33:15 +08:00
他的意思应该是直接跳地址吧,类似新做个页面类似导航
|
4
wangxiaoer 2017-07-06 15:41:55 +08:00
@justfly 跟 frame 关系不大,就是类似 @IIJustmaogepao 说的根据用户身份生成的导航页,跳到对应原有的页面。
当然,如果原有配置页面风格不同,而你又想统一的话,可能需要 frame 这种办法,再加上 js 做些手脚(比如把原有页面的页头、页脚去掉)啥的。 |
5
wangxiaoer 2017-07-06 15:44:56 +08:00
即使采用你原有的思路,我觉得动态路由也是没有必要的,只需要按照用户身份隐藏、显示对应的操作入口就行。因为权限的判定肯定要后端做的。
上面说的跳转可能遇到的问题就是各个系统有各自的地址、各自的验证接口,这样难点反倒在于单点登录,不过我想这个应该可以通过反向代理解决吧。 |
6
justfly OP @wangxiaoer 谢谢你的想法。
设计中是有一个单点的鉴权系统的,前端根据鉴权结果决定哪些入口不显示,后端 API 都跟鉴权系统交互判断权限。 跳各个子系统是没有问题的。而我想的是这个系统的 「边栏」 显示用户所拥有的各个子系统权限的汇总,右边局部渲染子系统的页面,不需要跳来跳去,给人感觉是一个独立的项目。如果只是一个导航页,用户就会在不同站点之间切换,每个站点就算风格统一,边栏的菜单列表也不尽相同,给用户的感觉不如第一种好 |
7
wangxiaoer 2017-07-06 16:08:06 +08:00
@justfly 那就 iframe 最简单暴力。
新的页面设计好,比如边栏放权限汇总菜单之类,这是新功能,不冲突。右边根据用户操作把原有页面塞到 iframe 里面,这种情况下可能原有页面本身带有边栏、页脚啥的,这就是我说的可能需要 js 做一点手脚,把这些无关的干掉。这里面涉及到同源策略,但是我想反代应该可行。 |