# bytue

**Repository Path**: Maxfengyan/bytue

## Basic Information

- **Project Name**: bytue
- **Description**: boss-usercenter
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://maxfengyan.gitee.io/boss-login
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-09-21
- **Last Updated**: 2020-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目名称：boss-userCenter
### 项目描述：广电融合用户播控平台-用户中心管控系统
### 开发者：马丰彦
### 描述：
- boss-userCenter系统为boss系统的用户中心管控系统，管理AAA用户的状态、账号、平台、鉴权、业务流水、认证、总平台以及分平台的统计功能。
- boss-userCenter每次切换menu是都会用从中心登录系统传入的token主动调取权限接口，来做到动态获取权限加载，做到权限无缝切换修改，无需重新登录。
- 系统左侧菜单三角处为各个系统衔接的入口，可以通过点击进入到不同系统（url携带token参数，处理与登录中心相同。）
- 系统内分为总平台以及分平台，总平台下分为两个个二级菜单，分平台下分为三个二级菜单。所有菜单、按钮皆为动态加载，通过获取权限接口来动态递归比对用户权限，显示视图。
- 左侧菜单为动态路由加载，接口传入几个平台权限，菜单就会动态生成几个平台menu(实现：vue-router: beforeEach => API: addRouter())。
- boss-userCenter最主要的精髓是通过后台传入的数据，实现了多平台动态路由加载。
- 默认进入页为总控中心概要，如果没有总控权限，默认页为第一个分平台权限统计,如果连分平台都没有统计权限，那就进入某用户管控页面(此功能虽然很鸡肋，但是实现很复杂，挖个坑在此处，防止以后忘记)。
### 技术栈：vue/vue-router/vuex/element-ui/axios/crypto-js/mockjs等
### <div style="color:red;">核心逻辑处理:</div>
- 通过登录中心传入的url参数，获取到了token值
- token值存入cookie以及store中
- 调取`获取用户`接口，得到用户的所有权限
- 在store中处理好接收到的参数，把分平台拆分处理循环存入路由数组中，并把获取到的菜单权限+按钮权限存入store中便于menu显示以及按钮指令接收。
- 在路由守卫中调用addRouter()，实现路由动态加载。在页面中调用指令v-power实现按钮权限(感觉实现的逻辑很复杂，为什么一句话就说完了，sad)
### <h4 style="color:red;">注意：除正式线上环境外，所有其他演示环境皆为mock数据(重写了axios拦截请求)。为方便处理，所有mock数据没有做到根据请求参数来返回结果，*故所有总平台与分平台的用户管控以及统计数据皆相同，特此说明。*</h4>
#### 项目结构
```
|— build                                // 构建相关
|— config                               // 配置相关
|— dist                                 // 打包文件
|— mock                                 // mock数据
|— src                                  // 源代码
|   |— api                              // 所有http请求(每个模块对应每个请求模块)
|   |— assets                           // 静态图片文件
|   |— components                       // 全局公用组件
|   |   |— Breadcrumb                   // 封装面包屑导航组件
|   |   |— Hamburger                    // 封装侧边栏状态组件
|   |   |— SvgIcon                      // 封装icon图标库组件
|   |— directive                        // 按钮权限自定义指令
|   |— icons                            // svg图标库/iconfont图标库
|   |— router                           // 全局路由管理
|   |— store                            // vuex缓存数据存放
|   |   |— modules                      // vuex模块
|   |   |     |— app.js                 // 侧边栏状态存储
|   |   |     |— power.js               // 处理分平台路由递归加载
|   |   |     |— user.js                // 获取用户状态：登录、登出、前端登出、获取用户信息
|   |   |— getters.js                   // vuex getters 
|   |   |— index.js                     // vuex 入口页
|   |— styles                           // css样式文件
|   |    |— element-ui.scss             // 修改原生element-ui框架样式
|   |    |— index.scss                  // 默认样式统一
|   |    |— mixin.scss                  // 修改侧边栏滚动条
|   |    |— sidebar.scss                // 侧边栏样式
|   |    |— transition.scss             // 页面跳转过渡动画效果
|   |    |— variables.scss              // 变量样式，一键换肤
|   |— utils                            // 全局公用项目
|   |   |— auth.js                      // 获取用户token写缓存
|   |   |— downLoad.js                  // excel下载封装
|   |   |— loading.js                   // 封装axios请求全局遮罩
|   |   |— index.js                     // 工具类
|   |   |— request.js                   // 封装axios请求
|   |   |— secret.js                    // 封装aes+base64加密
|   |   |— urldecode.js                 // 封装url解码方法
|   |   |— urlencode.js                 // 封装url转码方法
|   |   |— validate.js                  // 正则验证
|   |— views                            // 所有页面
|   |   |— dashboard                    // 进入主页
|   |   |— layout                       // 布局页面
|   |   |   |— components               // 布局页面组件
|   |   |   |   |— Sidebar              // 侧边栏
|   |   |   |   |   |— index.vue        // 侧边栏主体
|   |   |   |   |   |— Item.vue         // 侧边栏图标实现
|   |   |   |   |   |— SidebarItem.vue  // 侧边栏嵌套实现
|   |   |   |   |— index.js             // 侧边栏入口文件
|   |   |   |   |— APPMain              // 主体部分
|   |   |   |   |— Navbar               // 头部导航栏 
|   |   |   |   |— mixin                // 侧边栏收缩实现
|   |   |   |   |— layout               // 页面布局
|   |   |— liantong                     // 分平台模块
|   |   |   |— components               // 分组管理组件
|   |   |   |   |— connect.vue          // 关联平台组件 
|   |   |   |   |— add.vue              // 用户新增组件 
|   |   |   |   |— edit.vue             // 用户编辑组件 
|   |   |   |   |— pay.vue              // 用户计费流水组件 
|   |   |   |   |— power.vue            // 用户鉴权组件 
|   |   |   |   |— approve.vue          // 用户认证业务组件 
|   |   |   |   |— point.vue            // 积分查看组件 
|   |   |   |   |— watch.vue            // 查看用户信息组件 
|   |   |   |— index.vue                // 分平台首页
|   |   |   |— aaariver.vue             // AAA业务首页
|   |   |   |— chart.vue                // 概要统计
|   |   |— log                          // 操作日志（*已迁移*）
|   |   |— partManage                   // 角色管理模块（*已迁移*）
|   |   |   |— components               // 角色管理组件（*已迁移*）
|   |   |   |   |— edit.vue             // 角色管理编辑组件（*已迁移*）
|   |   |   |— index.vue                // 角色管理首页（*已迁移*）
|   |   |— platformManage               // 平台管理模块（*已迁移*）
|   |   |   |— components               // 平台管理组件（*已迁移*）
|   |   |   |   |— edit.vue             // 平台管理编辑组件（*已迁移*）
|   |   |   |   |— add.vue              // 平台管理新增组件（*已迁移*）
|   |   |   |— index.vue                // 平台管理首页（*已迁移*）
|   |   |— search                       // 查询汇总模块
|   |   |   |— components               // 查询汇总组件
|   |   |   |   |— connectPlat.vue      // 查询汇总关联平台组件
|   |   |   |   |— add.vue              // 用户新增组件
|   |   |   |   |— chart.vue            // 统计概要
|   |   |   |   |— edit.vue             // 用户编辑组件
|   |   |   |   |— excelIn.vue          // excel上传下载
|   |   |   |   |— watchInfo.vue        // 查看用户详情
|   |   |   |   |— point.vue            // 查询汇总积分组件
|   |   |   |— newIndex.vue             // 查询汇总首页
|   |   |— userManage                   // 用户管理模块（*已迁移*）
|   |   |   |— components               // 用户管理组件（*已迁移*）
|   |   |   |   |— edit.vue             // 用户管理编辑组件（*已迁移*）
|   |   |   |— index.vue                // 用户管理首页（*已迁移*）
|   |   |— vipManage                    // 会员管理模块（*已迁移*）
|   |   |   |— index.vue                // 会员管理首页（*已迁移*）
|   |   |— 404.vue                      // 404错误页面
|   |— App.vue                          // 入口挂载页面
|   |— main.js                          // 总入口文件
|   |— permission.js                    // 封装权限管理+重定向页面        
|— static                               // 不打包资源
|— .babelrc                             // babel-loader配置
|— .editorconfig                        // 编辑器配置
|— .eslintrc.js                         // eslint配置
|— .gitignore                           // .git忽略项
|— .travis.yml                          // 自动化CI配置
|— index.html                           // html模板
|— package.json                         // npm包管理
|— README.md                            // 项目详细介绍
```