前端接入一体化控制台业务底包

• 使用 Vue.js 2.x 作为 UI 组件核心框架
• 使用 Ant Design Vue 作为 UI 组件库
• 基于 Ruo-Yi 的权限管理
• 基于 RBAC-前端业务底包 改造

自定义配置

在 src\config\default.settings.js 可配置：

export default {
  ...
  title: '网站标题',
  desc: '网站描述',
  copyright:`Copyright © ${new Date().getFullYear()} 河北东软软件有限公司`,
  ...
}

url访问格式

http://172.30.3.152/appname/?code=OVoq36&systemId=41127964865 授权码模式登录，当前项目部署地址 http://172.30.3.152/appname/,授权码code ,rbac系统idsystemId

• 接入前在rbac权限管理系统创建系统，并录入部署地址
• 访问需要在一体化控制台进行菜单与权限配置，生成入口
• 通过一体化控制台桌面进入当前业务系统

子应用初始化流程

1.创建系统

• 登录RBAC权限管理系统

  测试环境 admin / Admin123# / 权限管理系统

• 子系统管理-添加系统

  系统名称、系统编码（名称缩写）、系统地址（部署地址包含上下文）

  

• 子系统管理员-创建管理员

  用户昵称、所属系统、手机号、邮箱、用户名（登录用）、用户密码、角色

2.添加应用到桌面

测试地址 master / Admin123#

• 菜单管理-创建应用

  上级菜单、菜单类型、自定义图片、菜单名称（应用名称）、显示排序、是否外链（外链）、路由地址（系统id）

  

• 角色管理-创建角色关联应用

  角色名称、权限字符、角色顺序、菜单权限

  

• 用户管理-创建用户关联角色

  用户昵称、归属部门、手机号、用户名称（登录用）、用户密码、邮箱

  

3.配置业务系统（应用）菜单与权限

• 登录子系统权限管理系统

  测试环境 master/ Admin123# / 电子发票（下拉选择子系统）

  

• 菜单管理-创建业务菜单

  上级菜单、菜单名称（业务菜单）、是否外链（否）、路由地址（router path）、组件路径（项目 src/views/ 下路径）

  

• 角色管理-创建角色关联业务菜单

  角色名称、权限字符、菜单权限

  

• 用户管理-用户关联业务角色

  角色

4.进入系统开发

• 登录桌面

  测试环境 baiyx / Admin123#

• 进入应用-电子发票（业务系统）

• 本地访问

  • 线上地址不存在时（未部署）

  获取url参数 code 与 systemId https://localhost:10010/?code=FtvXSs&systemId=7460659996

  • 线上地址存在时（已部署）

​

获取xxx_SYSTEM_ID、xxx_Access-Token https://localhost:10010/?accessToken=a8913a44-c266-4b0d-84aa-ece276966d87&systemId=7460659996

5.本地项目配置

• 配置本地代理

devServer: {
    https: false, // 跟随线上sso对应的协议 https / http
    port: 10010,
    open: true,
    proxy: {
      "^/rest": {
        target: `http://172.30.3.152/xxxx`,
        changeOrigin: true
      },
      "^/sso": {
        target: `http://172.30.3.152/sso/`,
        changeOrigin: true
      }
    },
    disableHostCheck: true
  }

• 配置本地开发目录及文件

  创建目录及文件（同业务菜单地址配置）、更改系统名称

  

  

• 启动项目

​ npm run serve