refactor: permission

remove the frontend roles, control some features through backend roles and adjust the roles that
each route depends on

.env

@@ -4,7 +4,8 @@ ENV = 'currency'
 __PLACEHOLDER__ = 'disabled'
 # 传感器
 __SENSOR__ = 'disabled'
-__SENSOR_ELK__ = 'disabled'
+# 摄像头
+__CAMERA__ = 'disabled'
 
 # gateway
 VUE_APP_GATEWAY = ''

.env.development

@@ -1,28 +1,19 @@
-#gateway
-# 84服务器
-# VUE_APP_GATEWAY = 'isoc.artaplay.com:8443'
-# 71服务器
-VUE_APP_GATEWAY = 'isoc.artaplay.com:7443'
-# aliyun
-# VUE_APP_GATEWAY = 'msr.idms.top'
-# 徐州
-# VUE_APP_GATEWAY = 'msr.rondochina.com:6443'
-
-# base api
 VUE_APP_BASE_API = '/dev-api'
 
-# minio
 VUE_APP_MINIO = '/dev-api/oss-api'
 
-# thumbnail
 VUE_APP_THUMBNAIL = '/dev-api/api/imageproxy'
 
-# keycloak
 # 84和71服务器
 VUE_APP_KEYCLOAK_OPTIONS_URL = 'https://isoc.artaplay.com:8443/auth'
 # 84服务器
+# VUE_APP_GATEWAY = 'isoc.artaplay.com:8443'
 # VUE_APP_KEYCLOAK_OPTIONS_REALM = 'smsb'
+# 71服务器
+VUE_APP_GATEWAY = 'isoc.artaplay.com:7443'
 # aliyun
+# VUE_APP_GATEWAY = 'msr.idms.top'
 # VUE_APP_KEYCLOAK_OPTIONS_URL = 'https://msr.idms.top/auth'
 # 徐州
+# VUE_APP_GATEWAY = 'msr.rondochina.com:6443'
 # VUE_APP_KEYCLOAK_OPTIONS_URL = 'https://msr.rondochina.com:6443/auth'

.env.staging

@@ -1,6 +1,5 @@
 NODE_ENV = 'production'
 
-# just a flag
 ENV = 'staging'
 
 # keycloak

.env.xuzhou

@@ -1,7 +1,7 @@
 NODE_ENV = 'production'
 
-# just a flag
 ENV = 'xuzhou'
 
 __SENSOR__ = 'enabled'
-__SENSOR_ELK__ = 'enabled'
+
+VUE_APP_SENSOR_ELK = 'https://msr.rondochina.com:15601/app/kibana/app/dashboards#/view/5ccd19f0-9f9d-11ec-80c5-8f1eb0dbee8e?embed=true&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-24h%2Fh%2Cto%3Anow))&hide-filter-bar=true'

.eslintrc.js

@@ -16,7 +16,7 @@ module.exports = {
     __PREVIEW__: true,
     __PLACEHOLDER__: true,
     __SENSOR__: true,
-    __SENSOR_ELK__: true
+    __CAMERA__: true
   },
   // add your custom rules here
   //it is base on https://github.com/vuejs/eslint-config-vue

src/components/Permission/index.js

@@ -25,17 +25,19 @@ export default {
       default: null
     },
     access: {
-      type: String,
+      type: [String, Array],
       default: null
     }
   },
   computed: {
     allow () {
-      if (this.include || this.access) {
-        if (this.include && !hasPermission(this.roleSet, this.include)) {
+      const include = this.include
+      const access = this.access
+      if (include || access) {
+        if (include && !hasPermission(this.roleSet, include)) {
           return false
         }
-        if (this.access && !this.accessSet.has(this.access)) {
+        if (access && !(Array.isArray(access) ? access.some(item => this.accessSet.has(item)) : this.accessSet.has(access))) {
           return false
         }
         return true

src/constant.js

@@ -26,14 +26,9 @@ export const ScheduleType = {
 export const Access = {
   DEBUG: 'frontend:debug',
 
-  VIEW_PRODUCTS: 'frontend:view-products',
-  VIEW_DEVICES: 'frontend:view-devices',
-  VIEW_DEVICE: 'frontend:view-device',
-  VIEW_GROUPS: 'frontend:view-groups',
-  VIEW_ASSETS: 'frontend:view-assets',
-  VIEW_CALENDAR: 'frontend:view-calendar',
-  VIEW_LOGS: 'frontend:view-logs',
-  VIEW_UPGRADE: 'frontend:view-upgrade',
+  VIEW_SENSORS: 'view-sensors',
+  VIEW_CAMERAS: 'view-cameras',
+  VIEW_LOGS: 'view-logs',
 
   MANAGE_PROFILE: 'manage-profile',
   MANAGE_PRODUCTS: 'manage-products',
@@ -43,6 +38,7 @@ export const Access = {
   MANAGE_ASSETS: 'manage-assets',
   MANAGE_CALENDAR: 'manage-calendar',
   MANAGE_UPGRADE: 'manage-upgrade',
+
   // features
   PUBLISH_CALENDAR: 'publish-calendar',
   REVIEW: 'review',
@@ -53,18 +49,10 @@ export const Access = {
 export const RoleAccess = {
   [Role.ADMIN]: [
     Access.DEBUG,
-    Access.VIEW_PRODUCTS,
-    Access.VIEW_GROUPS,
-    Access.VIEW_DEVICES,
-    Access.VIEW_DEVICE,
-    Access.VIEW_ASSETS,
-    Access.VIEW_CALENDAR,
     Access.VIEW_LOGS,
-    Access.VIEW_UPGRADE,
     Access.MANAGE_PROFILE,
     Access.MANAGE_PRODUCTS,
     Access.MANAGE_DEVICES,
-    Access.MANAGE_DEVICE,
     Access.MANAGE_GROUPS,
     Access.MANAGE_ASSETS,
     Access.MANAGE_CALENDAR,
@@ -73,10 +61,6 @@ export const RoleAccess = {
     Access.REVIEW
   ],
   [Role.SUPERVISOR]: [
-    Access.VIEW_DEVICES,
-    Access.VIEW_DEVICE,
-    Access.VIEW_ASSETS,
-    Access.VIEW_CALENDAR,
     Access.VIEW_LOGS,
     Access.MANAGE_PROFILE,
     Access.MANAGE_DEVICE,
@@ -86,10 +70,6 @@ export const RoleAccess = {
     Access.REVIEW
   ],
   [Role.STAFF]: [
-    Access.VIEW_DEVICES,
-    Access.VIEW_DEVICE,
-    Access.VIEW_ASSETS,
-    Access.VIEW_CALENDAR,
     Access.MANAGE_PROFILE,
     Access.MANAGE_DEVICE,
     Access.MANAGE_GROUPS,
@@ -98,7 +78,15 @@ export const RoleAccess = {
     Access.PUBLISH_CALENDAR
   ],
   [Role.VISITOR]: [
-    Access.VIEW_DEVICE,
     Access.MANAGE_PROFILE
   ]
 }
+
+Object.values(RoleAccess).forEach(roles => {
+  if (__SENSOR__) {
+    roles.push(Access.VIEW_SENSORS)
+  }
+  if (__CAMERA__) {
+    roles.push(Access.VIEW_CAMERAS)
+  }
+})

src/main.js

@@ -49,7 +49,6 @@ function startApp () {
 
   Vue.prototype.Access = Access
   Vue.prototype.__PLACEHOLDER__ = __PLACEHOLDER__
-  Vue.prototype.__SENSOR_ELK__ = __SENSOR_ELK__
 
   Vue.config.productionTip = false
   Vue.config.errorHandler = err => {

src/router/index.js

@@ -69,33 +69,32 @@ export const asyncRoutes = [
         name: 'media',
         path: 'media',
         component: () => import('@/views/media/index'),
-        access: Access.VIEW_ASSETS,
+        access: Access.MANAGE_ASSETS,
         meta: { title: '媒资管理' }
       },
       {
         name: 'program',
         path: 'program',
         component: () => import('@/views/bigscreen/index'),
-        access: Access.VIEW_CALENDAR,
+        access: Access.MANAGE_CALENDAR,
         meta: { title: '节目编排' }
       },
       {
         path: 'schedule',
         component: Solo,
+        access: Access.MANAGE_CALENDAR,
         meta: { title: '节目排期' },
         children: [
           {
             name: 'schedule-list',
             path: '',
             component: () => import('@/views/schedule/index'),
-            access: Access.VIEW_CALENDAR,
             meta: { cache: 'ScheduleList' }
           },
           {
             name: 'schedule-design',
             path: ':id',
             component: () => import('@/views/schedule/designer/index'),
-            access: Access.MANAGE_CALENDAR,
             meta: { title: '排期编辑', activeMenu: '/cm/schedule', cache: 'ScheduleList' },
             hidden: true
           }
@@ -119,7 +118,7 @@ export const asyncRoutes = [
         name: 'schedule-deploy-history',
         path: 'history',
         component: () => import('@/views/schedule/history/index'),
-        access: Access.VIEW_CALENDAR,
+        access: [Access.PUBLISH_CALENDAR, Access.REVIEW],
         meta: { title: '发布历史' }
       }
     ]
@@ -127,7 +126,6 @@ export const asyncRoutes = [
   {
     path: '/dm',
     component: Layout,
-    access: Access.VIEW_DEVICE,
     meta: { title: '大屏设备', icon: 'el-icon-monitor' },
     children: [
       {
@@ -146,6 +144,7 @@ export const asyncRoutes = [
       {
         name: 'camera',
         path: 'camera',
+        access: Access.VIEW_CAMERAS,
         component: () => import('@/views/device/camera/index'),
         meta: { title: '视频监控' }
       }
@@ -160,14 +159,14 @@ export const asyncRoutes = [
         name: 'category',
         path: 'category',
         component: () => import('@/views/device/category/index'),
-        access: Access.VIEW_PRODUCTS,
+        access: Access.MANAGE_PRODUCTS,
         meta: { title: '产品分类' }
       },
       {
         name: 'product',
         path: 'product',
         component: () => import('@/views/device/product/index'),
-        access: Access.VIEW_PRODUCTS,
+        access: Access.MANAGE_PRODUCTS,
         meta: { title: '产品管理' }
       },
       {
@@ -179,14 +178,13 @@ export const asyncRoutes = [
             name: 'device-list',
             path: '',
             component: () => import('@/views/device/index'),
-            access: Access.VIEW_DEVICES,
+            access: [Access.MANAGE_DEVICES, Access.MANAGE_DEVICE],
             meta: { cache: 'DeviceList' }
           },
           {
             name: 'device-detail',
             path: ':id',
             component: () => import('@/views/device/detail/index'),
-            access: Access.VIEW_DEVICE,
             meta: { title: '设备详情', activeMenu: '/m/device', cache: 'DeviceList' },
             hidden: true
           }
@@ -196,7 +194,7 @@ export const asyncRoutes = [
         name: 'group',
         path: 'group',
         component: () => import('@/views/device/group/index'),
-        access: Access.VIEW_GROUPS,
+        access: Access.MANAGE_GROUPS,
         meta: { title: '分组管理' }
       }
     ]
@@ -232,7 +230,7 @@ export const asyncRoutes = [
   {
     path: '/u',
     component: Layout,
-    access: Access.VIEW_UPGRADE,
+    access: Access.MANAGE_UPGRADE,
     meta: { title: '升级管理', icon: 'el-icon-upload' },
     children: [
       {

src/store/modules/permission.js

@@ -2,7 +2,7 @@ import { constantRoutes, asyncRoutes } from '@/router'
 import { Role } from '@/constant'
 
 function hasPermission (accessSet, access) {
-  return !access || accessSet.has(access)
+  return !access || (Array.isArray(access) ? access.some(item => accessSet.has(item)) : accessSet.has(access))
 }
 
 export function filterAsyncRoutes (routes, accessSet) {

src/views/bigscreen/index.vue

@@ -8,7 +8,6 @@
     <div class="l-flex__none l-flex--row has-bottom-padding">
       <div class="l-flex__auto l-flex--row c-sibling-item">
         <button
-          v-if="canEdit"
           class="o-button"
           @click="toAdd"
         >
@@ -17,7 +16,6 @@
         </button>
       </div>
       <el-select
-        v-if="canEdit"
         v-model="params.status"
         class="l-flex__none c-sibling-item o-select"
         placeholder="请选择状态"
@@ -72,32 +70,30 @@
           </span>
           <div class="c-program__footer">
             <span class="c-program__time u-ellipsis">{{ item.createTime }}</span>
-            <template v-if="canEdit">
+            <el-tooltip
+              v-if="item.status === 0"
+              content="提交"
+              :hide-after="2000"
+            >
+              <i
+                class="o-icon--active el-icon-upload2 u-pointer"
+                @click.stop="onSubmit(item)"
+              />
+            </el-tooltip>
+            <permission
+              :skip="item.status === 0"
+              :access="Access.DELETE_FORCE"
+            >
               <el-tooltip
-                v-if="item.status === 0"
-                content="提交"
+                content="删除"
                 :hide-after="2000"
               >
                 <i
-                  class="o-icon--active el-icon-upload2 u-pointer"
-                  @click.stop="onSubmit(item)"
+                  class="o-icon--active el-icon-delete u-pointer"
+                  @click.stop="onDel(item)"
                 />
               </el-tooltip>
-              <permission
-                :skip="item.status === 0"
-                :access="Access.DELETE_FORCE"
-              >
-                <el-tooltip
-                  content="删除"
-                  :hide-after="2000"
-                >
-                  <i
-                    class="o-icon--active el-icon-delete u-pointer"
-                    @click.stop="onDel(item)"
-                  />
-                </el-tooltip>
-              </permission>
-            </template>
+            </permission>
           </div>
         </div>
         <edit-input
@@ -201,16 +197,13 @@ export default {
       ratios: [],
       ...createListOptions({
         pageSize: 8,
-        status: this.accessSet.has(this.Access.MANAGE_DEVICE) ? void 0 : State.RESOLVED,
+        status: void 0,
         name: ''
       }),
       disabled: false
     }
   },
   computed: {
-    canEdit () {
-      return this.accessSet.has(this.Access.MANAGE_CALENDAR)
-    },
     isAbnormal () {
       return this.error || !this.loading && this.totalCount === 0
     }

src/views/dashboard/index.vue

@@ -109,10 +109,10 @@
       <i class="el-icon-loading" />
     </div>
     <iframe
-      v-if="__SENSOR_ELK__"
+      v-if="elk"
       class="c-dashboard__block"
       style="height: 850px; border: none;"
-      src="https://msr.rondochina.com:15601/app/kibana/app/dashboards#/view/5ccd19f0-9f9d-11ec-80c5-8f1eb0dbee8e?embed=true&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-24h%2Fh%2Cto%3Anow))&hide-filter-bar=true"
+      :src="elk"
     />
   </wrapper>
 </template>
@@ -151,7 +151,8 @@ export default {
       deviceOptions: {
         list: [],
         loaded: false
-      }
+      },
+      elk: process.env.VUE_APP_SENSOR_ELK
     }
   },
   created () {

src/views/device/detail/components/DeviceInfo.vue

@@ -2,7 +2,7 @@
   <div class="c-info">
     <div class="l-flex--row has-bottom-padding u-bold">
       <span class="c-sibling-item">设备信息</span>
-      <permission :access="Access.MANAGE_DEVICE">
+      <permission :access="[Access.MANAGE_DEVICES, Access.MANAGE_DEVICE]">
         <span
           class="c-sibling-item c-info__edit u-pointer"
           @click="toEdit"

src/views/device/detail/components/DeviceStatus.vue

@@ -33,7 +33,7 @@ export default {
   data () {
     const tabs = [
       { key: 'runtime', name: '播控器状态' },
-      __SENSOR__ ? { key: 'sensor', name: '传感器状态' } : null
+      this.accessSet.has(this.Access.VIEW_SENSORS) ? { key: 'sensor', name: '传感器状态' } : null
     ].filter(val => val)
     return {
       tabs,

src/views/device/detail/index.vue

@@ -95,7 +95,7 @@ export default {
         { key: 'info', label: '设备信息' },
         { key: 'status', label: '运行状态' },
         { key: 'alarm', label: '设备告警' },
-        this.accessSet.has(this.Access.MANAGE_DEVICE) ? { key: 'invoke', label: '设备操控' } : null,
+        this.accessSet.has(this.Access.MANAGE_DEVICES) || this.accessSet.has(this.Access.MANAGE_DEVICE) ? { key: 'invoke', label: '设备操控' } : null,
         { key: 'screen', label: '屏体状态监测' }
       ].filter(val => val)
     }

src/views/device/index.vue

@@ -121,8 +121,7 @@
         <template v-slot="scope">
           <el-tag
             v-if="scope.row.activate === 0"
-            class="o-tag"
-            :class="{ 'u-pointer': canEdit }"
+            class="o-tag u-pointer"
             type="warning"
             size="medium"
             @click.stop="toggleActivate(scope.row)"
@@ -131,8 +130,7 @@
           </el-tag>
           <el-tag
             v-if="scope.row.activate === 1"
-            class="o-tag"
-            :class="{ 'u-pointer': canEdit }"
+            class="o-tag u-pointer"
             size="medium"
             @click.stop="toggleActivate(scope.row)"
           >
@@ -140,8 +138,7 @@
           </el-tag>
           <el-tag
             v-if="scope.row.activate === 2"
-            class="o-tag"
-            :class="{ 'u-pointer': canEdit }"
+            class="o-tag u-pointer"
             :type="scope.row.onlineStatus === 1 ? 'success' : 'danger'"
             size="medium"
             @click.stop="toggleActivate(scope.row)"
@@ -157,14 +154,12 @@
       >
         <template v-slot="scope">
           <template v-if="!scope.row.empty">
-            <permission :access="Access.VIEW_DEVICE">
-              <div
-                class="c-table__btn u-pointer"
-                @click.stop="toEditDevice(scope.row)"
-              >
-                查看
-              </div>
-            </permission>
+            <div
+              class="c-table__btn u-pointer"
+              @click.stop="toEditDevice(scope.row)"
+            >
+              查看
+            </div>
             <template v-if="canEdit">
               <div
                 v-if="scope.row.isMaster"
@@ -557,9 +552,6 @@ export default {
       }
     },
     toggleActivate (item) {
-      if (!this.canEdit) {
-        return
-      }
       (item.activate ? deactivateDevice : activateDevice)(item).then(() => {
         if (item.isMaster) {
           this.getList()

src/views/schedule/index.vue

@@ -26,7 +26,7 @@
       <template #header>
         <div class="l-flex__auto c-sibling-item">
           <button
-            v-if="canEdit && isNormal"
+            v-if="isNormal"
             class="o-button"
             @click="toAdd"
           >
@@ -63,7 +63,6 @@
           />
         </el-select>
         <el-select
-          v-if="canEdit"
           v-model="currObj.params.status"
           class="l-flex__none c-sibling-item o-select"
           placeholder="请选择状态"
@@ -150,40 +149,38 @@
         width="180"
       >
         <template v-slot="scope">
-          <template v-if="canEdit">
-            <template v-if="scope.row.status === 0">
-              <div
-                class="c-table__btn u-pointer"
-                @click="toDesign(scope.row.id)"
-              >
-                编辑
-              </div>
-              <div
-                class="c-table__btn u-pointer"
-                @click="toSubmit(scope.row)"
-              >
-                提交
-              </div>
-            </template>
-            <permission
-              :skip="scope.row.status === 0"
-              :access="Access.DELETE_FORCE"
+          <template v-if="scope.row.status === 0">
+            <div
+              class="c-table__btn u-pointer"
+              @click="toDesign(scope.row.id)"
             >
-              <div
-                class="c-table__btn u-pointer"
-                @click="toDel(scope.row)"
-              >
-                删除
-              </div>
-            </permission>
+              编辑
+            </div>
+            <div
+              class="c-table__btn u-pointer"
+              @click="toSubmit(scope.row)"
+            >
+              提交
+            </div>
           </template>
           <div
-            v-if="scope.row.status !== 0"
+            v-else
             class="c-table__btn u-pointer"
             @click="toView(scope.row.id)"
           >
             预览
           </div>
+          <permission
+            :skip="scope.row.status === 0"
+            :access="Access.DELETE_FORCE"
+          >
+            <div
+              class="c-table__btn u-pointer"
+              @click="toDel(scope.row)"
+            >
+              删除
+            </div>
+          </permission>
         </template>
       </el-table-column>
     </c-table>
@@ -304,7 +301,7 @@ export default {
       active: 'normal',
       normal: createListOptions({
         type: void 0,
-        status: this.accessSet.has(this.Access.MANAGE_CALENDAR) ? void 0 : State.RESOLVED,
+        status: void 0,
         resolutionRatio: void 0,
         name: ''
       }),
@@ -318,9 +315,6 @@ export default {
     }
   },
   computed: {
-    canEdit () {
-      return this.accessSet.has(this.Access.MANAGE_CALENDAR)
-    },
     currObj () {
       return this[this.active]
     },

vue.config.js

@@ -17,7 +17,8 @@ const features = {
   __PLACEHOLDER__: isEnable('__PLACEHOLDER__'),
   // 传感器
   __SENSOR__: isEnable('__SENSOR__'),
-  __SENSOR_ELK__: isEnable('__SENSOR_ELK__')
+  // 摄像头
+  __CAMERA__: isEnable('__CAMERA__')
 }
 
 const copyFiles = [