diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 1bd3768af..8882a49c5 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -68,7 +68,7 @@
                }"  >
       <div v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title" :class="{'drag-disabled': !draggable,'chartBox':true}" v-show="!item.isHide">
         <line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
-                          :ref="'editChart'+item.id" :temp-dom="tempDom"
+                          :from="from" :ref="'editChart'+item.id" :temp-dom="tempDom"
                           @on-refresh-data="refreshChart"
                           @on-remove-chart-block="removeChart"
                           @on-duplicate-chart-block="duplicateChart"
@@ -78,7 +78,7 @@
                           :chart-index="index"
                           :chart-data="item"></line-chart-block>
 
-        <chart-single-stat  v-if="item.type === 'singleStat'" :ref="'editChart'+item.id" :key="'inner' + item.id"
+        <chart-single-stat  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'singleStat'"
                      @on-refresh-data="refreshChart"
                      @on-search-data="searchData"
                      @on-remove-chart-block="removeChart"
@@ -89,7 +89,7 @@
                      :panel-id="filter.panelId"
                      :chart-index="index"></chart-single-stat>
 
-        <chart-table  v-if="item.type === 'table'" :ref="'editChart'+item.id" :key="'inner' + item.id"
+        <chart-table  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'table'"
                       @on-refresh-data="refreshChart"
                       @on-search-data="searchData"
                       @on-remove-chart-block="removeChart"
@@ -100,7 +100,7 @@
                       :chart-data="item"
                       :chart-index="index"></chart-table>
 
-        <chart-url  v-if="item.type === 'url'" :ref="'editChart'+item.id" :key="'inner' + item.id"
+        <chart-url  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'url'"
                      @on-refresh-data="refreshChart"
                      @on-search-data="searchData"
                      @on-remove-chart-block="removeChart"
@@ -112,14 +112,14 @@
                      :chart-index="index"></chart-url>
 
         <chart-detail  v-if="item.type === 'assetInfo' || item.type == 'projectInfo' || item.type == 'endpointInfo' || item.type == 'alertRuleInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
-                          :panel-id="filter.panelId"
+                          :from="from" :panel-id="filter.panelId"
                           :chart-index="index"
                           @on-refresh-data="refreshChart"
                           :chart-data="item"
                           :editChartId="'editChartId' + item.id"
         ></chart-detail>
 
-        <text-chart v-if="item.type === 'text'" :key="'inner' + item.id" :ref="'editChart'+item.id"
+        <text-chart :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'text'"
                     @on-refresh-data="refreshChart"
                     @on-remove-chart-block="removeChart"
                     @on-duplicate-chart-block="duplicateChart"
@@ -130,7 +130,7 @@
                     :chart-index="index"
         ></text-chart>
 
-        <chart-alert-list  :ref="'editChart'+item.id"
+        <chart-alert-list  :from="from" :ref="'editChart'+item.id"
                            :panel-id="filter.panelId"
                           :chart-index="index"
                           v-if="item.type  === 'alertList'"
@@ -169,7 +169,8 @@
       isModel: {type: Boolean, default: false},
       additionalInfo:{},
       draggable: {type: Boolean, default: true},
-      detail: Object
+      detail: Object,
+      from: {type: String}
     },
 
     components: {
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index 2d4569f8b..8aeea9032 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -67,7 +67,6 @@
   line-height: 20px;
 }
 .nz-chart-dropdown {
-  height: 180px;
   li {
     padding-left:15px !important;
     padding-right:0px !important;
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 7d9b7275e..573f975d3 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -43,18 +43,17 @@
             <ul v-if="filter.from != 'alertRule'" slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex" :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}"    style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
               <li v-show="!isExplore"  @click="refreshChart"  class="el-dropdown-menu__item">
                 <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
-              <li v-show="!isExplore" @click="editChart"  class="el-dropdown-menu__item">
+              <li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`"  v-show="!isExplore">
                 <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
-              <li v-show="!isExplore" @click="removeChart"  class="el-dropdown-menu__item">
+              <li @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`"  v-show="!isExplore">
                 <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  @click="showAllScreen"  class="el-dropdown-menu__item">
+              <li  @click="showAllScreen" class="el-dropdown-menu__item">
                 <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
-              <li  v-show="!isExplore" @click="duplicate"  class="el-dropdown-menu__item">
+              <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`"  v-show="!isExplore">
                 <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
             </ul>
           </el-dropdown>
         </div>
-        <!--<div  v-if="seriesItem.length!==seriesItemArr.length" class="more"><i class="el-icon-warning"></i> {{$t('dashboard.panel.moreFirstTitle')}} {{seriesLength}}{{$t('dashboard.panel.moreSecondTitle')}}<span @click="loadMore" class="moreClick">{{$t('dashboard.panel.moreThirdTitle')}}{{seriesItem.length}}</span></div>-->
         <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
         <div class="chart-no-data" v-show="noData">No Data</div>
         <template v-if="!hasLegendOptions">
@@ -218,7 +217,21 @@
         type:Boolean,
         default:false,
       },
-      tempDom: Object
+      tempDom: Object,
+      from: {type: String}
+    },
+    computed: {
+      getButtonCode() {
+        return function(from, type) {
+          let code = "";
+          switch (from) {
+            case this.$CONSTANTS.fromRoute.panel:
+              if (type == 'chartToEdit') {
+                code = "";
+              }
+          }
+        }
+      }
     },
     data() {
       return {
diff --git a/nezha-fronted/src/components/common/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
index 3173603a1..556414c97 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
@@ -147,7 +147,7 @@
             </el-popover>
           </div>
           <div v-else-if="item.prop == 'option'" class="content-right-options">
-            <span :title="$t('overall.delete')" @click="toDeleteMessage(scope.row)" class="content-right-option" :id="'alert-list-delete-'+scope.row.id"><i  class="nz-icon nz-icon-delete"></i></span>
+            <span :id="'alert-list-delete-'+scope.row.id" :title="$t('overall.delete')" @click="toDeleteMessage(scope.row)" class="content-right-option" v-has="`${from}_delete`"><i  class="nz-icon nz-icon-delete"></i></span>
           </div>
           <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
           <template v-else>-</template>
@@ -242,6 +242,7 @@
         type:Boolean,
         default:true,
       },
+      from: {type: String}
     },
     data() {
       vm = this;
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index dbdb21b17..a3e3ebdec 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -18,16 +18,16 @@
 
         <!------TAB区------>
         <!--机柜-->
-      <cabinet-tab v-show="subResizeShow" v-if="from == 'dc' && targetTab == 'cabinet'" :obj="obj" @changeTab="changeTab"></cabinet-tab>
+      <cabinet-tab :obj="obj" @changeTab="changeTab" v-if="from == $CONSTANTS.fromRoute.dc && targetTab == 'cabinet'" v-show="subResizeShow"></cabinet-tab>
         <!--告警信息-->
-      <alert-message-tab v-show="subResizeShow" v-if="((from == 'alertRule' || from == 'asset' || from == 'endpoint') && targetTab == 'alertMessage')" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
+      <alert-message-tab :from="from" :obj="obj" @changeTab="changeTab" v-if="((from == $CONSTANTS.fromRoute.rule || from == $CONSTANTS.fromRoute.asset || from == $CONSTANTS.fromRoute.endpoint) && targetTab == 'alertMessage')" v-show="subResizeShow"></alert-message-tab>
         <!--asset页的endpoint列表-->
-      <endpoint-tab v-show="subResizeShow" v-if="from == 'asset' && targetTab == 'endpoint'" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
+      <endpoint-tab :from="from" :obj="obj" @changeTab="changeTab" v-if="from == $CONSTANTS.fromRoute.asset && targetTab == $CONSTANTS.fromRoute.endpoint" v-show="subResizeShow"></endpoint-tab>
         <!--endpoint-query-->
-      <endpoint-query-tab v-show="subResizeShow" v-if="(from == 'endpoint' && targetTab == 'endpointQuery')" :from="from" :obj="obj" @changeTab="changeTab" ref="endpointQuery"></endpoint-query-tab>
+      <endpoint-query-tab :from="from" :obj="obj" @changeTab="changeTab" ref="endpointQuery" v-if="(from == $CONSTANTS.fromRoute.endpoint && targetTab == 'endpointQuery')" v-show="subResizeShow"></endpoint-query-tab>
 
         <!-- model-panel/asset-detail/project-overview的panel-->
-      <panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project' || from == 'alertRule' || from == 'endpoint') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
+      <panel-tab :from="from" :obj="obj" ref="panelTab" v-if="(from == $CONSTANTS.fromRoute.model || from == $CONSTANTS.fromRoute.asset || from == $CONSTANTS.fromRoute.project || from == $CONSTANTS.fromRoute.rule || from == $CONSTANTS.fromRoute.endpoint) && targetTab == 'panel'" v-show="subResizeShow"
                  @changeTab="changeTab" :targetTab.sync="targetTab" :detail="detail"></panel-tab>
 
     </div>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
index 1de5e07da..ff2095a2c 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -3,25 +3,25 @@
     <div class="sub-top-tools">
       <div class="sub-list-tabs">
         <div class="sub-list-tab-title">
-          <template v-if="from == 'asset'">{{obj.host}}</template>
-          <template v-if="from == 'alertRule'">{{obj.alertName}}</template>
-          <template v-if="from == 'endpoint'"><div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{obj ? obj.id : ''}}</div></template>
+          <template v-if="from == $CONSTANTS.fromRoute.asset">{{obj.host}}</template>
+          <template v-if="from == $CONSTANTS.fromRoute.rule">{{obj.alertName}}</template>
+          <template v-if="from == $CONSTANTS.fromRoute.endpoint"><div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{obj ? obj.id : ''}}</div></template>
         </div><div
-        class="sub-list-tab" @click="changeTab(from == 'asset' || from == 'alertRule' || from == 'endpoint'? 'panel' : 'detail')">{{$t("overall.detail")}}</div><div
-        class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.alerts")}}</div><div v-if="from == 'asset'"
+        @click="changeTab(from == $CONSTANTS.fromRoute.asset || from == $CONSTANTS.fromRoute.rule || from == $CONSTANTS.fromRoute.endpoint? 'panel' : 'detail')" class="sub-list-tab">{{$t("overall.detail")}}</div><div
+        class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.alerts")}}</div><div v-if="from == $CONSTANTS.fromRoute.asset"
         class="sub-list-tab" @click="changeTab('endpoint')">{{$t("asset.tableTitle.modules")}}</div>
-        <div v-if="from == 'endpoint'" class="sub-list-tab" @click="changeTab('endpointQuery')">{{$t("overall.query")}}</div>
+        <div @click="changeTab('endpointQuery')" class="sub-list-tab" v-if="from == $CONSTANTS.fromRoute.endpoint">{{$t("overall.query")}}</div>
       </div>
       <div class="top-tool-right">
         <pick-time :refresh-data-func="getAlertList" v-model="searchTime" :use-chart-unit="false" :use-refresh="false" :default-pick="defaultPick" :show-empty="true"></pick-time>
         <div class="top-tool-search">
           <search-input :default-item="'alertMessageState'" :default-value="defaultSearchValue" :searchMsg="searchMsg" @search="search" position="alert-bottom"></search-input>
         </div>
-        <button type="button" @click="importBox.show = true" :title="$t('overall.exportExcelLower')"
+        <button :title="$t('overall.exportExcelLower')" @click="importBox.show = true" type="button" v-has="['rule_alerts_export', 'project_endpoint_alerts_export', 'asset_alerts_export']"
             class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">
           <i class="nz-icon nz-icon-download1"></i>
         </button>
-        <delete-button :delete-objs="batchDeleteObjs" api="alert/message" @after="getAlertList" :clickFunction="openDelMessageBox"></delete-button>
+        <delete-button :clickFunction="openDelMessageBox" :delete-objs="batchDeleteObjs" @after="getAlertList" api="alert/message" v-has="['rule_alerts_delete', 'project_endpoint_alerts_delete', 'asset_alerts_delete']"></delete-button>
       </div>
     </div>
     <alertMessageTable
@@ -34,6 +34,7 @@
       @deleteMessage="deleteMessage"
       @select-change="(selection)=>{this.batchDeleteObjs=selection}"
       :showTopBtn="false"
+      :from="`${from}_alerts`"
     ></alertMessageTable>
     <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
     <!--导出-->
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
index 7b05942cd..77f045879 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
@@ -9,11 +9,11 @@
         <div class="top-tool-search">
           <search-input :searchMsg="searchMsg" @search="search" position="cabinet-bottom"></search-input>
         </div>
-        <button type="button" @click="add" :title="$t('overall.createCabinet')"
+        <button :title="$t('overall.createCabinet')" @click="add" type="button" v-has="'dc_cabinet_toAdd'"
                 class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="cab-add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
-        <delete-button :delete-objs="batchDeleteObjs" api="cabinet" @after="getTableData"></delete-button>
+        <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" api="cabinet" v-has="'dc_cabinet_delete'"></delete-button>
       </div>
     </div>
     <el-table
@@ -43,8 +43,8 @@
       >
         <template slot-scope="scope" :column="item">
           <div v-if="item.prop == 'option'" class="content-right-options">
-            <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-            <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
+            <span :id="'dc-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'dc_cabinet_toEdit'"><i class="nz-icon nz-icon-edit"></i></span>
+            <span :id="'dc-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'dc_cabinet_delete'"><i class="nz-icon nz-icon-delete"></i></span>
           </div>
           <template v-else-if="item.prop == 'assetStat'">
             <el-popover
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index 11ad79800..44d2c40b4 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -112,13 +112,13 @@
         {{$t("project.endpoint.dialogTitle")}}
         <div class="float-right panel-calendar dialog-tool" style="display: flex">
           <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
-          <button class="nz-btn nz-btn-size-large nz-btn-style-normal-new" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
+          <button @click="saveChart" class="nz-btn nz-btn-size-large nz-btn-style-normal-new" v-has="'project_endpoint_query_chart_toAdd'">{{$t('dashboard.metric.saveChart')}}</button>
         </div>
       </div>
       <chart ref="endpointChart" :unit="chartUnit"></chart>
     </el-dialog>
     <transition name="right-box">
-      <chart-box v-if="rightBox.show" @close="rightBox.show = false" :chart="chart" ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="getPanelData" @reload="getPanelData" :show-panel="{id: -1, name: '', type: 'endpointQuery'}" box-class="save-chart-box"></chart-box>
+      <chart-box :chart="chart" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'endpointQuery'}" @close="rightBox.show = false" @on-create-success="createSuccess" @reload="getPanelData" @reloadOnlyPanel="getPanelData" box-class="save-chart-box" from="project_endpoint_query" ref="addChartModal" v-if="rightBox.show"></chart-box>
     </transition>
   </span>
 </template>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
index bddc1d43f..c5794a951 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
@@ -16,16 +16,17 @@
           export-url="/endpoint/export"
           import-url="/endpoint/import"
           :params="endpointSearchLabel"
+          :permissions="{import: 'asset_endpoint_import', export: 'asset_endpoint_export'}"
           @afterImport="getTableData"
           class="margin-l-20"
         >
           <template slot="optionZone">
-            <button @click.stop="add" :title="$t('overall.createEndpoint')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
+            <button :title="$t('overall.createEndpoint')" @click.stop="add" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project" v-has="'asset_endpoint_toAdd'">
               <i class="nz-icon nz-icon-create-square"></i>
             </button>
           </template>
         </export-excel>
-        <delete-button :delete-objs="batchDeleteObjs" api="endpoint" @after="getTableData"></delete-button>
+        <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" api="endpoint" v-has="'asset_endpoint_delete'"></delete-button>
       </div>
     </div>
     <!-- 自定义table列 -->
@@ -90,14 +91,15 @@
           </span>
           <template v-else-if="item.prop == 'type'">{{scope.row.module.type}}</template>
           <div v-else-if="item.prop == 'option'">&nbsp;
-                <span
-                  :title="$t('overall.edit')"
-                  @click="editEndpoint(scope.row)"
-                  class="content-right-option"
-                  :id="'edp-edit-'+scope.row.id">
-                  <i class="nz-icon nz-icon-edit"></i>
-                </span>
-            <span :title="$t('overall.delete')" @click.stop="delEndpoint(scope.row)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
+            <span
+              :id="'edp-edit-'+scope.row.id"
+              :title="$t('overall.edit')"
+              @click="editEndpoint(scope.row)"
+              class="content-right-option"
+              v-has="'asset_endpoint_toEdit'">
+              <i class="nz-icon nz-icon-edit"></i>
+            </span>
+            <span :id="'asset-del-'+scope.row.id" :title="$t('overall.delete')" @click.stop="delEndpoint(scope.row)" class="content-right-option" v-has="'asset_endpoint_delete'"><i class="nz-icon nz-icon-delete"></i></span>
           </div>
           <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>
           <span v-else-if="item.prop == 'state'" >
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
index 8216ed1f6..6abaaf406 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
@@ -4,54 +4,58 @@
     <div class="sub-top-tools" v-if="from != 'project'">
       <div class="sub-list-tabs">
         <div class="sub-list-tab-title">
-          <template v-if="from == 'model'">{{obj.name}}</template>
-          <template v-else-if="from == 'asset'">{{obj.host}}</template>
-          <template v-else-if="from == 'alertRule'">{{obj.alertName}}</template>
-          <template v-else-if="from == 'endpoint'">{{$t("project.endpoint.endpointId")}}: {{obj.id}}</template>
-        </div><div class="sub-list-tab sub-list-tab-active" v-if="from == 'model'">{{$t("dashboard.panel.title")}}</div><template v-if="from == 'asset'"><div
+          <template v-if="from == $CONSTANTS.fromRoute.model">{{obj.name}}</template>
+          <template v-else-if="from == $CONSTANTS.fromRoute.asset">{{obj.host}}</template>
+          <template v-else-if="from == $CONSTANTS.fromRoute.rule">{{obj.alertName}}</template>
+          <template v-else-if="from == $CONSTANTS.fromRoute.endpoint">{{$t("project.endpoint.endpointId")}}: {{obj.id}}</template>
+        </div><div class="sub-list-tab sub-list-tab-active" v-if="from == $CONSTANTS.fromRoute.model">{{$t("dashboard.panel.title")}}</div><template v-if="from == $CONSTANTS.fromRoute.asset"><div
           class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
           class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div><div
           class="sub-list-tab" @click="changeTab('endpoint')">{{$t("asset.tableTitle.modules")}}</div>
         </template><template v-if="from == 'alertRule'"><div
           class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
           class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div>
-        </template><template v-if="from == 'endpoint'"><div
+        </template><template v-if="from == $CONSTANTS.fromRoute.endpoint"><div
           class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
           class="sub-list-tab " @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div><div
           class="sub-list-tab" @click="changeTab('endpointQuery')">{{$t("overall.query")}}</div>
         </template>
       </div>
       <div class="top-tool-right">
-        <div class="top-tool-search margin-r-20" v-if="from != 'alertRule' && from != 'endpoint'">
+        <div class="top-tool-search margin-r-20" v-if="from != $CONSTANTS.fromRoute.rule && from != $CONSTANTS.fromRoute.endpoint">
           <el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput"  @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable   >
             <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" @click="focusInput" style="float: right"></i>
           </el-input>
         </div>
-        <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" v-if="from=='asset'" ref="pickTime"></pick-time>
+        <pick-time :refresh-data-func="dateChange" :use-chart-unit="false" ref="pickTime" v-if="from == $CONSTANTS.fromRoute.asset" v-model="searchTime"></pick-time>
         <export-excel
           export-file-name="chart"
           export-url="/panel/export"
           import-url="/panel/import"
           :params="filter"
-          :from="'asset'"
+          :from="$CONSTANTS.fromRoute.asset"
           :link="obj"
+          :permissions="{
+            import: `${from}_chart_import`,
+            export: `${from}_chart_export`
+          }"
           @afterImport="dateChange"
           v-if="$route.path==='/asset' || $route.path==='/model'"
         >
           <template slot="optionZone">
-            <button @click="addChart" :title="$t('overall.createChart')" v-if="from != 'alertRule' && from != 'endpoint'"
+            <button :title="$t('overall.createChart')" @click="addChart" v-has="['model_chart_toAdd', 'asset_chart_toAdd']" v-if="from != $CONSTANTS.fromRoute.rule && from != $CONSTANTS.fromRoute.endpoint"
                     class="nz-btn nz-btn-size-normal nz-btn-style-light ">
               <i class="nz-icon-create-square nz-icon"></i>
             </button>
           </template>
         </export-excel>
-        <span v-else>
-          <button @click="addChart" :title="$t('overall.createChart')" v-if="from != 'alertRule' && from != 'endpoint'"
+        <template v-else>
+          <button :title="$t('overall.createChart')" @click="addChart" v-if="from != $CONSTANTS.fromRoute.rule && from != $CONSTANTS.fromRoute.endpoint"
                   class="nz-btn nz-btn-size-normal nz-btn-style-light ">
-          <i class="nz-icon-create-square nz-icon"></i>
-        </button>
-        </span>
-        <button @click="syncChart" :title="$t('overall.syncChart')" v-if="from == 'asset'||from == 'model'" style="margin-left: 20px;"
+            <i class="nz-icon-create-square nz-icon"></i>
+          </button>
+        </template>
+        <button :title="$t('overall.syncChart')" @click="syncChart" style="margin-left: 20px;" v-has="['model_chart_sync', 'asset_chart_sync']" v-if="from == $CONSTANTS.fromRoute.asset||from == $CONSTANTS.fromRoute.model"
                 class="nz-btn nz-btn-size-normal nz-btn-style-light ">
           <i class="nz-icon-sync nz-icon"></i>
         </button>
@@ -59,7 +63,7 @@
     </div>
 
     <!--project的工具栏-->
-    <div class="top-tools" v-else>
+    <!--<div class="top-tools" v-else>
       <div class="top-tool-main-right">
         <div class="top-tool-search relative-position margin-r-20">
           <el-input ref="queryPanel" @clear="clearInput" id="queryPanel2" @focus="focusInput"  @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable   >
@@ -73,20 +77,20 @@
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
       </div>
-    </div>
+    </div>-->
 
     <!--图表-->
     <div class="table-list" id="tableList">
       <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
         <div class="box-content">
-          <chart-list @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" :draggable="draggable" :detail="detail"
-                      ref="chartList" :is-model="from == 'model'" :additional-info="obj"></chart-list>
+          <chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
+                      @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList"></chart-list>
         </div>
       </el-scrollbar>
     </div>
     <button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
     <transition name="right-box">
-      <chart-box @close="closeRightBox" @delete-chart="delChart" :chart="chart" v-if="rightBox.show" ref="addChartModal" :show-panel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
+      <chart-box :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" ref="addChartModal" v-if="rightBox.show"></chart-box>
     </transition>
   </div>
 </template>
@@ -104,7 +108,7 @@
       from: String,
       obj: Object,
       draggable: {type: Boolean, default: true},
-      detail: Object
+      detail: Object,
     },
     data() {
       return {
@@ -448,20 +452,20 @@
         this.$refs.queryPanel.focus();
       },
       syncChart:function(){
-        if(this.from=='asset'||this.from=='model'){
+        if(this.from==$CONSTANTS.fromRoute.asset||this.from==$CONSTANTS.fromRoute.model){
           this.$confirm(this.$t("tip.syncTip"), {
             confirmButtonText: this.$t("tip.yes"),
             cancelButtonText: this.$t("tip.no"),
             type: 'warning'
           }).then(() => {
             let param={
-              modelId:this.from=='model'?this.obj.id:null,
-              assetId:this.from=='asset'?this.obj.id:null,
+              modelId:this.from==$CONSTANTS.fromRoute.model?this.obj.id:null,
+              assetId:this.from==$CONSTANTS.fromRoute.asset?this.obj.id:null,
             }
             this.$put('/model/syncChart',param).then(response=>{
               if(response.code == 200){
                 this.$message({duration: 1000, type: 'success', message: this.$t("tip.syncSuccess")});
-                if(this.from == 'asset'){
+                if(this.from == $CONSTANTS.fromRoute.asset){
                   this.refresh();
                 }
               }else{
diff --git a/nezha-fronted/src/components/common/exportXLSX.vue b/nezha-fronted/src/components/common/exportXLSX.vue
index 5c907950f..3a83cc18e 100644
--- a/nezha-fronted/src/components/common/exportXLSX.vue
+++ b/nezha-fronted/src/components/common/exportXLSX.vue
@@ -1,21 +1,15 @@
 <template>
   <div class="export-xlsx">
     <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light">
-      <slot name="optionZone"></slot><button @mouseenter="exportMenuHandler(true)" @mouseleave="exportMenuHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go" style="padding: 0">
+      <slot name="optionZone"></slot><button @mouseenter="exportMenuHandler(true)" @mouseleave="exportMenuHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go" style="padding: 0" v-has="[permissions.import, permissions.export]">
         <i class="nz-icon nz-icon-arrow-down"></i>
         <transition name="el-zoom-in-top">
           <ul class="el-dropdown-menu el-popper el-dropdown-menu--mini export-dropdown" style="z-index: 101" v-show="exportShow">
-            <li @click="showImportBox(1)" class="el-dropdown-menu__item dropdown-content"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</li>
-            <li @click="showImportBox(2)" class="el-dropdown-menu__item dropdown-content"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcel')}}</li>
+            <li @click="showImportBox(1)" class="el-dropdown-menu__item dropdown-content" v-has="permissions.import"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</li>
+            <li @click="showImportBox(2)" class="el-dropdown-menu__item dropdown-content" v-has="permissions.export"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcel')}}</li>
           </ul>
         </transition>
       </button>
-      <!--<el-dropdown split-button type="primary" size="mini" class="dropdownBtn">
-        <slot name="optionZone" class="option-button"></slot><el-dropdown-menu slot="dropdown">
-          <el-dropdown-item @click.native="showImportBox(1)" class="dropdown-content"><i class="nz-icon nz-icon-upload1"></i>{{$t('overall.importExcelLower')}}</el-dropdown-item>
-          <el-dropdown-item @click.native="showImportBox(2)" class="dropdown-content"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcelLower')}}</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>-->
     </div>
 
     <el-dialog :visible.sync="importBox.show" :title="importBox.title" modal-append-to-body append-to-body :modal-append-to-body='false' :show-close="true" :width="importBox.width" @close="closeDialog" class="nz-dialog" :close-on-click-modal="importBox.type!=3">
@@ -113,6 +107,7 @@
       exportFileName:{type:String},
       importUrl: {type:String,required:true},
       link:{type:Object},
+      permissions: {type: Object}
     },
     data:function(){
       return {
@@ -121,7 +116,7 @@
         importFileList:[],
         importResult:null,
         exportShow: false,
-        paramsType:''
+        paramsType:'',
       }
     },
     created(){
@@ -129,6 +124,15 @@
     mounted(){
       this.getParamsType();
     },
+    /*watch: {
+      permissions: {
+        immediate: true,
+        deep: true,
+        handler(n) {
+          this.permission = Object(n);
+        }
+      }
+    },*/
     methods: {
       importChange:function(file,fileList){
         if (fileList.length > 0) {
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index a6f24d17c..71cd03dc6 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -10,49 +10,105 @@
       active="1"
       unique-opened
     >
-      <el-submenu :disabled="!linkData||linkData.length <1" class="icon-menu-item" index="100" popper-class="nz-submenu" >
-        <template slot="title">
-          <i class="nz-icon-navmore nz-icon" style="font-size: 17px;"></i>
-        </template>
-        <template v-for="(item, index) in linkData">
-          <el-menu-item :index="'0-' + index">
-              <span class="linkTitle"><a :href='item.url' class="nz-a" target="_blank" rel="noopener norefferrer" :title="item.name">{{item.name}}</a></span>
-          </el-menu-item>
-        </template>
-      </el-submenu>
-      <el-submenu class="icon-menu-item" index="101" popper-class="display-none">
-        <div slot="title" class="el-submenu__title" @click="cli" >
-          <i class="nz-icon nz-icon-cli" style="font-size: 18px;"></i>
-          <div class="right-tip" v-show="$store.state.consoleCount>0">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</div>
-        </div>
-      </el-submenu>
-      <el-submenu class="icon-menu-item" index="102" popper-class="nz-submenu">
-        <template slot="title">
-         <i class="nz-icon-create-square nz-icon" style="font-size: 18px;"></i>
-        </template>
-        <template v-for="(item, index) in createMenu">
-          <el-menu-item :index="'0-' + index">
-            <div @click="createBox(item)">
-              <span>{{item.label}}</span>
+      <template v-for="(menu, index) in getMenuList" v-if="menu.code == 'header' && menu.children && menu.children.length > 0">
+        <template v-for="(subMenu, subIndex) in menu.children">
+          <el-submenu :disabled="!linkData||linkData.length <1" :index="`${index}-${subIndex}`" class="icon-menu-item" popper-class="nz-submenu" v-if="subMenu.code == 'header_link'">
+            <template slot="title">
+              <i class="nz-icon-navmore nz-icon" style="font-size: 17px;"></i>
+            </template>
+            <template v-for="(item, index) in linkData">
+              <el-menu-item :index="'0-' + index">
+                <span class="linkTitle"><a :href='item.url' :title="item.name" class="nz-a" rel="noopener norefferrer" target="_blank">{{item.name}}</a></span>
+              </el-menu-item>
+            </template>
+          </el-submenu>
+          <el-submenu :index="`${index}-${subIndex}`" class="icon-menu-item" popper-class="display-none" v-if="subMenu.code == 'header_terminal'">
+            <div @click="cli" class="el-submenu__title" slot="title" >
+              <i class="nz-icon nz-icon-cli" style="font-size: 18px;"></i>
+              <div class="right-tip" v-show="$store.state.consoleCount>0">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</div>
             </div>
-          </el-menu-item>
+          </el-submenu>
+          <el-submenu :index="`${index}-${subIndex}`" class="icon-menu-item" popper-class="nz-submenu" v-if="subMenu.code == 'header_add'">
+            <template slot="title">
+              <i class="nz-icon-create-square nz-icon" style="font-size: 18px;"></i>
+            </template>
+            <template v-for="(item, createIndex) in createMenu">
+              <el-menu-item :index="`${index}-${subIndex}-${createIndex}`" v-has="item.permission">
+                <div @click="createBox(item)">
+                  <span>{{item.label}}</span>
+                </div>
+              </el-menu-item>
+            </template>
+          </el-submenu>
         </template>
-      </el-submenu>
+      </template>
+
       <el-menu-item index="103" >
         <div class="vertical-line" ></div>
       </el-menu-item>
 
-      <el-submenu :index="`${index}`" :key="index" popper-class="nz-submenu" v-for="(menu, index) in getMenuList">
-        <template slot="title">
-          <div :class ="menuIsActive(menu, 'parent')" @click="jumpTo(menu.route)" >
-            {{$t(menu.i18n)}}
-          </div>
+      <el-submenu :index="`${index}`" :key="index" popper-class="nz-submenu" v-for="(menu, index) in getMenuList" v-if="menu.code != 'header'">
+        <template v-if="menu.code == 'asset'">
+          <template slot="title">
+            <div @click="jumpToAsset()" v-if="assetData.length == 0">{{$t(menu.i18n)}}</div>
+            <div :class="{'menu-active' : route == '/asset'}" @click="jumpToAsset()" v-else>{{$t(menu.i18n)}}</div>
+          </template>
+          <template>
+            <el-menu-item index="3-0" v-if="assetData.length == 0"><div @click="createBox({type: 6})" v-has="'asset_toAdd'"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createDatacenter")}}</div></el-menu-item>
+            <template v-else>
+              <el-scrollbar style= 'height: 360px' v-if="assetData.length>10">
+                <el-menu-item :index="'3-' + index" :key="index" v-for="(item, index) in assetData">
+                  <div :class="{'menu-item-active': route == '/asset' && activeItemIndex == item.id}" @click="jumpToAsset(item)" @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''">
+                    <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
+                  </div>
+                </el-menu-item>
+              </el-scrollbar>
+              <el-menu-item :index="'3-' + index" :key="index" v-else v-for="(item, index) in assetData">
+                <div :class="{'menu-item-active': route == '/asset' && activeItemIndex == item.id}" @click="jumpToAsset(item)" @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''">
+                  <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
+                </div>
+              </el-menu-item>
+            </template>
+          </template>
+        </template>
+        <template v-else-if="menu.code == 'project'">
+          <template slot="title">
+            <div v-if="projectData.length == 0">{{$t(menu.i18n)}}</div>
+            <div :class ="route == '/project' ? 'menu-active' :''" @click="jumpToProject(projectData[0])" v-else >{{$t(menu.i18n)}}</div>
+          </template>
+          <template>
+            <el-menu-item index="2-0" v-if="projectData.length == 0"><div @click="createBox({type: 1})" v-has="'project_toAdd'"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createProject")}}</div></el-menu-item>
+            <template v-else>
+              <el-scrollbar style="height:360px" v-if="projectData.length>10">
+                <el-menu-item :index="'2-' + index" :key="index" v-for="(item, index) in projectData">
+                  <div :class="{'menu-item-active': route == '/project' && activeItemIndex == item.id}" @click="jumpToProject(item)" @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''">
+                    <span class="too-long-split" style="width: 135px;">{{item.name}}</span>
+                    <div @click.stop="toEditProject(item)" class="menu-edit" v-has="'project_toEdit'" v-show="hoverItemIndex == '2-' + index && item.buildIn != 1"><i class="nz-icon nz-icon-edit"></i></div>
+                  </div>
+                </el-menu-item>
+              </el-scrollbar>
+              <el-menu-item :index="'2-' + index" :key="index" v-else v-for="(item, index) in projectData">
+                <div :class="{'menu-item-active': route == '/project' && activeItemIndex == item.id}" @click="jumpToProject(item)" @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''">
+                  <span class="too-long-split" style="width: 135px;">{{item.name}}</span>
+                  <div @click.stop="toEditProject(item)" class="menu-edit" v-has="'project_toEdit'" v-show="hoverItemIndex == '2-' + index && item.buildIn != 1"><i class="nz-icon nz-icon-edit"></i></div>
+                </div>
+              </el-menu-item>
+            </template>
+          </template>
+        </template>
+        <template v-else>
+          <template slot="title">
+            <div :class="menuIsActive(menu, 'parent')" @click="jumpTo(menu.route)" >
+              {{$t(menu.i18n)}}
+            </div>
+          </template>
+          <el-menu-item :index="`${index}-${subIndex}`" :key="`${index}-${subIndex}`" v-for="(subMenu, subIndex) in menu.children">
+            <div :class="menuIsActive(subMenu)" @click="jumpTo(subMenu.route)" >{{$t(subMenu.i18n)}}</div>
+          </el-menu-item>
         </template>
-        <el-menu-item :index="`${index}-${subIndex}`" :key="`${index}-${subIndex}`" v-for="(subMenu, subIndex) in menu.children">
-          <div :class="menuIsActive(subMenu)" @click="jumpTo(subMenu.route)" >{{$t(subMenu.i18n)}}</div>
-        </el-menu-item>
       </el-submenu>
 
+
       <!--<el-submenu index="1" popper-class="nz-submenu">
         <template slot="title">
           <div @click="jumpTo('/overview')" :class ="(route == '/overview' ||route == '/panel' || route == '/explore') ? 'menu-active' :'' " >
@@ -159,27 +215,27 @@
         <el-menu-item index="5-8">
           <div @click="jumpTo('/about')" :class="{'menu-item-active' :(route == '/about' )}">{{$t('overall.about')}}</div>
         </el-menu-item>
-      </el-submenu>
-      <el-submenu index="6" popper-class="nz-submenu">
+      </el-submenu>-->
+      <el-submenu index="101" popper-class="nz-submenu">
         <template slot="title">
           <div class='nz-user'>{{username}}<i class="nz-icon nz-icon-arrow-down"></i></div>
         </template>
-        <el-menu-item index="6-0">
+        <el-menu-item index="101-0">
           <div :style="language=='en'?'color:#f90':''" @click="changeLocal('en')">English</div>
         </el-menu-item>
-        <el-menu-item index="6-1">
+        <el-menu-item index="101-1">
           <div :style="language=='cn'?'color:#f90':''" @click="changeLocal('cn')">中文</div>
         </el-menu-item>
         <el-menu-item class="nz-menu-line" @click.stop index="6-2">
           <div style="height: 1px; width: 100%; background-color: #cccccc;"></div>
         </el-menu-item>
-        <el-menu-item index="6-3">
+        <el-menu-item index="101-3">
           <div @click="showPwdDialog">{{$t('overall.changePwd')}}</div>
         </el-menu-item>
-        <el-menu-item index="6-4">
+        <el-menu-item index="101-4">
           <div @click="logout">{{$t('overall.signOut')}}</div>
         </el-menu-item>
-      </el-submenu>-->
+      </el-submenu>
     </el-menu>
 
     <transition name="right-box">
@@ -299,27 +355,32 @@
           {
             label: this.$t('project.project.project'),
             url: 'project',
-            type: 1
+            type: 1,
+            permission: 'header_add_project'
           },
           {
             label: this.$t('project.module.module'),
             url: 'project',
-            type: 2
+            type: 2,
+            permission: 'header_add_module'
           },
           {
             label: this.$t('project.endpoint.endpoint'),
             url: 'project',
-            type: 3
+            type: 3,
+            permission: 'header_add_endpoint'
           },
           {
             label: this.$t('asset.asset'),
             url: 'asset',
-            type: 4
+            type: 4,
+            permission: 'header_add_asset'
           },
           {
             label: this.$t('alert.config.alertConfig'),
             url: 'alertConfig',
-            type: 5
+            type: 5,
+            permission: 'header_add_rule'
           },
         ],
         showChangePwd:false,
@@ -537,28 +598,6 @@
           window.addEventListener('popstate', this.cancel, false);
         }
       },
-      menuIsActive() {
-        return function(menu, isParent) {
-          if (isParent) {
-            let isCurrent = menu.children.some(sub => {
-              return sub.route == this.route;
-            });
-            if (isCurrent) {
-              return "menu-active";
-            } else {
-              return "";
-            }
-          } else {
-            if (menu.route == this.route) {
-              if (isCurrent) {
-                return "menu-item-active";
-              } else {
-                return "";
-              }
-            }
-          }
-        };
-      }
     },
     mounted() {
       this.$i18n.locale = this.language;
@@ -580,6 +619,26 @@
       },
       overViewProject(){
         return this.$store.getters.getOverViewProject;
+      },
+      menuIsActive() {
+        return function(menu, isParent) {
+          if (isParent) {
+            let isCurrent = menu.children.some(sub => {
+              return sub.route == this.route;
+            });
+            if (isCurrent) {
+              return "menu-active";
+            } else {
+              return "";
+            }
+          } else {
+            if (menu.route == this.route) {
+              return "menu-item-active";
+            } else {
+              return "";
+            }
+          }
+        };
       }
     },
     watch:{
diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index 9315f7ce8..5fcb4db11 100644
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -145,3 +145,17 @@ export const setting = {
       {value:'OFF',label: i18n.t('config.dc.suspended')}
     ]
 };
+
+//公共组件的跳转来源
+export const fromRoute = {
+  panel: "panel",
+  explore: "explore",
+  message: "message",
+  rule: "rule",
+  model: "model",
+  asset: "asset",
+  dc: "dc",
+  endpoint: "endpoint",
+  project: "project",
+  endpointQuery: "endpointQuery"
+};
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 858171ecb..558154282 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -398,7 +398,8 @@ const cn = {
     resetSuccess: "重置成功",
     syncSuccess:'同步成功',
     syncTip:"此操作可能造成原有数据或图表被覆盖，确认同步吗？",
-    noImportFile:'没有可导入的文件'
+    noImportFile:'没有可导入的文件',
+    noAccess: "无访问权限",
   },
   asset: {
     asset: "资产",
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 4b685d9ee..9327151a8 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -402,7 +402,8 @@ const en = {
     resetSuccess:'Reset success',
     syncSuccess:'Synchronize success',
     syncTip:'This operation may cause the original data or chart to be overwritten. Are you sure to synchronize?',
-    noImportFile:'No import file found'
+    noImportFile:'No import file found',
+    noAccess: "No access",
   },
   asset:{
     asset: 'Asset',
diff --git a/nezha-fronted/src/components/common/leftMenu.vue b/nezha-fronted/src/components/common/leftMenu.vue
index 2b5e0a8d3..7737a3aa6 100644
--- a/nezha-fronted/src/components/common/leftMenu.vue
+++ b/nezha-fronted/src/components/common/leftMenu.vue
@@ -1,11 +1,7 @@
 <template>
   <div class="content">
     <div class="content-left left-slot" :class="{'left-slot-shrink': isShrink}">
-      <div class="sidebar-title too-long-split">
-        <template v-if="parentMenu == '/project'">{{$t("overall.project")}}</template>
-        <template v-else-if="parentMenu == '/asset'">{{$t("overall.asset")}}</template>
-        <template v-else>{{$CONSTANTS.staticMenus[parentMenu].title}}</template>
-      </div>
+      <div class="sidebar-title too-long-split">{{$t(parentMenu.i18n)}}</div>
       <div class="sidebar-info" style="height: 90%">
         <el-scrollbar style="height: 100%;">
           <template v-if="parentMenu == '/project'">
@@ -32,7 +28,7 @@
                       <div :id="`module-${module.id}`" class="item-tip">
                         <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(module.id, module.name, ready)">{{module.name}}</div>
                         <span class="too-long-split" style="width: 120px;">{{module.name}}</span>
-                        <div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="editModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
+                        <div :id="'project-module-edit-'+module.id" @click.stop="editModule(module)" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" v-has="'project_module_toEdit'" v-show="module.buildIn != 1" ><i class="nz-icon nz-icon-edit"></i></div>
                       </div>
                     </div>
                   </template>
@@ -115,8 +111,8 @@
 
           </template>
           <template v-else>
-            <div v-for="menu in $CONSTANTS.staticMenus[parentMenu].menu" class="sidebar-info-item" :class="{'sidebar-info-item-active': menu.route == route}" @click="jumpTo(menu.route)">
-              {{menu.name}}
+            <div :class="{'sidebar-info-item-active': menu.route == route}" @click="jumpTo(menu.route)" class="sidebar-info-item" v-for="menu in parentMenu.children">
+              {{$t(menu.i18n)}}
             </div>
           </template>
         </el-scrollbar>
@@ -146,7 +142,7 @@
       data() {
         return{
           isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true',
-          parentMenu: "dashboards",
+          parentMenu: {},
           //active: "/overview",
 
           //project相关
@@ -265,16 +261,18 @@
           let parentMenu = "";
           let end = false;
           if (route != '/project' && route != '/asset') {
-            for (let r in this.$CONSTANTS.staticMenus) {
+            this.$store.getters.menuList.forEach(menu => {
               if (!end) {
-                this.$CONSTANTS.staticMenus[r].menu.forEach(menu => {
-                  if (route == menu.route) {
-                    parentMenu = r
-                    end = true;
-                  }
-                });
+                if (menu.children) {
+                  menu.children.forEach(subMenu => {
+                    if (subMenu.route == route) {
+                      parentMenu = menu;
+                      end = true;
+                    }
+                  });
+                }
               }
-            }
+            });
           } else {
             parentMenu = route;
           }
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 1786df6d2..310c52ed9 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -14,7 +14,7 @@
         <input v-model="loginData.password" type="password" name="password" autocomplete="on" :placeholder="$t('login.password')"></input>
       </div>
       <div class="login-foot">
-        <button @click="login" class="login-btn" id="login">{{$t("login.login")}}</button>
+        <button @click="login" class="login-btn" id="login" v-loading="loading">{{$t("login.login")}}</button>
         <div class="login-foot-lang" @click.stop="langListShow = !langListShow">
           <i v-if="lang == 'en'" class="nz-icon nz-icon-lang-en"></i>
           <i v-else-if="lang == 'cn'" class="nz-icon nz-icon-lang-zh"></i>
@@ -41,6 +41,7 @@ export default {
         password: '',
         remember: false
       },
+      loading: false,
       lang: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en', //en/cn
       langListShow: false,
     }
@@ -48,7 +49,11 @@ export default {
   methods: {
     ...mapActions(["loginSuccess"]),
     login() {
+      if (this.loading) {
+        return;
+      }
       if (this.validateLogin()&&(this.$route.path=='/'||this.$route.path=='/login')) {
+        this.loading = true;
         this.$post('sys/login', this.loginData).then(res => {
           if (res.code == 200) {
             //登录成功，记录用户名、token和lang
@@ -60,6 +65,8 @@ export default {
           } else {
             this.$message.error(res.msg);
           }
+        }).finally(() => {
+          this.loading = false;
         });
       }
     },
@@ -202,6 +209,10 @@ export default {
   color: white;
   cursor: pointer;
 }
+.login-foot .el-loading-spinner {
+  width: 36px;
+  height: 36px;
+}
 .login-foot-lang-list::before {
   content: " ";
   width: 0px;
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
index 1bbfc520b..e1b309028 100644
--- a/nezha-fronted/src/components/common/project/topology.vue
+++ b/nezha-fronted/src/components/common/project/topology.vue
@@ -12,7 +12,7 @@
         <!--<span class="edit-topology-remove" @click="lineDel">Remove</span>-->
       </span>
       <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
-        <button @click="saveTopology" class="nz-btn nz-btn-size-small-new nz-btn-style-normal-new">{{$t('project.topology.save')}}</button>
+        <button @click="saveTopology" class="nz-btn nz-btn-size-small-new nz-btn-style-normal-new" v-has="'project_topo_save'">{{$t('project.topology.save')}}</button>
         <button @click="cancelTopology" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new">{{$t('project.topology.cancel')}}</button>
       </span>
       <span class="edit-topology-line-cancel" v-show="selectNodeTitle&&editVisNetwork"> {{$t('project.topology.selTwoNode')}} <span class="edit-topologyCancel" @click="closeAddLine">{{$t('project.topology.cancel')}}</span></span>
diff --git a/nezha-fronted/src/components/common/project/visNetwork.vue b/nezha-fronted/src/components/common/project/visNetwork.vue
index 46f1ff98d..fa5c0f1f5 100644
--- a/nezha-fronted/src/components/common/project/visNetwork.vue
+++ b/nezha-fronted/src/components/common/project/visNetwork.vue
@@ -24,7 +24,7 @@
                 <!--<span class="chart-title-icon"><i class="nz-icon nz-icon-caret-bottom el-icon&#45;&#45;right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>-->
               </span>
               <div style="height: 34px">
-                <button style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right pickTime" @click="editVisNetworkChange(true)" v-show="!editVisNetwork">
+                <button @click="editVisNetworkChange(true)" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right pickTime" style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button" v-has="'project_topo_edit'" v-show="!editVisNetwork">
                   <i class="nz-icon nz-icon-edit"   :title="$t('project.topology.edit')"></i>
                 </button>
                 <pick-time v-show="!editVisNetwork" :showTimePicker="false" class="float-right pickTime" :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime"></pick-time>
diff --git a/nezha-fronted/src/components/common/rightBox/accountBox.vue b/nezha-fronted/src/components/common/rightBox/accountBox.vue
index 40fe8dfd4..1cd3d4c61 100644
--- a/nezha-fronted/src/components/common/rightBox/accountBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/accountBox.vue
@@ -2,7 +2,7 @@
   <div class="right-box right-box-account" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
-      <button type="button" v-if="editUser.userId" @click="del"
+      <button @click="del" type="button" v-has="'account_delete'" v-if="editUser.userId"
               class="nz-btn nz-btn-size-normal nz-btn-size-alien"
               id="account-edit-del">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
@@ -66,7 +66,7 @@
               class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="save" id="account-save"
+      <button @click="save" id="account-save" v-has="'account_save'"
               class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
         <span>{{$t('overall.save')}}</span>
       </button>
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index 4bae6dc10..bc7f15adc 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -295,7 +295,7 @@
       <button @click="esc" id="ep-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="save" id="ep-add" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="ep-add" v-has="['asset_endpoint_save', 'project_endpoint_save']">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
diff --git a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
index 29be2f1a7..b87ebebd7 100644
--- a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
@@ -2,7 +2,7 @@
   <div class="right-box right-box-alert-config" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
-      <button type="button" v-if="alertRule.id" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
+      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="alert-box-del" type="button" v-has="'rule_delete'" v-if="alertRule.id">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
@@ -111,7 +111,7 @@
       <button @click="esc(false)" id="alert-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="save" id="alert-box-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="alert-box-save" v-has="'rule_save'">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index 397f34fd8..80605b29e 100644
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -2,7 +2,7 @@
   <div class="right-box right-box-asset" v-clickoutside="clickOutside">
     <!--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
-      <button v-if="editAsset.id" type="button" @click="del" id="asset-edit-del"
+      <button @click="del" id="asset-edit-del" type="button" v-has="'asset_delete'" v-if="editAsset.id"
               class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
@@ -61,7 +61,7 @@
             @change="modelChange"
           >
           </el-cascader>
-          <span style="vertical-align: middle"  class="right-box-form-add" @click="addVendor(editAsset.model.type.code)"><i class="nz-icon nz-icon-plus"></i></span>
+          <span @click="addVendor(editAsset.model.type.code)"  class="right-box-form-add" style="vertical-align: middle" v-has="'asset_vendor_toAdd'"><i class="nz-icon nz-icon-plus"></i></span>
         </el-form-item>
         <el-form-item :label="$t('asset.purchaseDate')">
           <div class="select-style">
@@ -154,7 +154,7 @@
       <button @click="esc(false)" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-edit-cancel">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="asset-edit-save">
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="asset-edit-save" v-has="'asset_save'">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
diff --git a/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue b/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
index 7d1954eb6..2bc4587ed 100644
--- a/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
+++ b/nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
@@ -251,7 +251,7 @@
       <button @click="esc(false)" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" id="asset-edit-cancel">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="asset-edit-save">
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="asset-edit-save" v-has="'asset_save'">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
diff --git a/nezha-fronted/src/components/common/rightBox/cabinetBox.vue b/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
index f9d358937..000e3d26a 100644
--- a/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/cabinetBox.vue
@@ -2,7 +2,7 @@
   <div class="right-box right-box-cabinet" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
-      <button id="cab-del" type="button" v-if="!editCabinet.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
+      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="cab-del" type="button" v-has="'dc_cabinet_delete'" v-if="!editCabinet.id">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
@@ -36,7 +36,7 @@
       <button @click="esc" id="cab-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="save" id="cab-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+      <button @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100" id="cab-box-save" v-has="'dc_cabinet_save'">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index 20b029461..69a75261e 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -2,7 +2,7 @@
   <div class="right-box right-box-dc" v-clickoutside="clickOutside">
       <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
-        <button id="dc-del" type="button" v-if="editDc.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
+        <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="dc-del" type="button" v-has="'dc_delete'" v-if="editDc.id">
           <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
           <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
         </button>
@@ -82,7 +82,7 @@
         <button @click="esc" id="dc-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
           <span>{{$t('overall.cancel')}}</span>
         </button>
-        <button @click="save" id="dc-box-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
+        <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="dc-box-save" v-has="'dc_save'">
           <span>{{$t('overall.save')}}</span>
         </button>
       </div>
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
index 15691acfb..23fffc4b3 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
@@ -2,7 +2,7 @@
   <div class="right-box right-box-edit-endpoint" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
-      <button id="edit-ep-del" type="button" v-if="editEndpoint.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
+      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="edit-ep-del" type="button" v-has="['project_endpoint_delete', 'asset_endpoint_delete']" v-if="editEndpoint.id">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
@@ -127,7 +127,7 @@
       <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="save" id="ep-edit-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="ep-edit-save" v-has="['asset_endpoint_save', 'project_endpoint_save']">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
diff --git a/nezha-fronted/src/components/common/rightBox/mibBox.vue b/nezha-fronted/src/components/common/rightBox/mibBox.vue
index b20a213bb..4cb2f7ed5 100644
--- a/nezha-fronted/src/components/common/rightBox/mibBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/mibBox.vue
@@ -2,7 +2,7 @@
   <div class="right-box right-box-mib" v-clickoutside="clickOutside" >
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
-      <button id="mib-del" type="button" v-if="editMib.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
+      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="mib-del" type="button" v-has="'snmp_file_delete'" v-if="editMib.id">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
@@ -51,7 +51,7 @@
       <button @click="esc(false)" id="model-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="save" id="model-box-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="model-box-save" v-has="'snmp_file_save'">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
diff --git a/nezha-fronted/src/components/common/rightBox/modelBox.vue b/nezha-fronted/src/components/common/rightBox/modelBox.vue
index b41897097..f88d66cae 100644
--- a/nezha-fronted/src/components/common/rightBox/modelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/modelBox.vue
@@ -2,7 +2,7 @@
   <div class="right-box right-box-model" v-clickoutside="clickOutside" @click="inputHandler">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
-      <button id="model-del" type="button" v-if="editModel.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
+      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="model-del" type="button" v-has="'model_delete'" v-if="editModel.id">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
@@ -34,9 +34,9 @@
                 <span v-if="!item.isEdit">{{item.value}}</span>
                 <span v-else @click.stop="inputHandler(item)"><el-input size="mini" v-model="editingType" @click.stop></el-input></span>
                 <div class="dropdown-btns" v-show="dropdownHoverItem == 'type' + item.id">
-                  <span class="dropdown-btn dropdown-btn-delete" :id="'model-type-op-del-' + item.id" @click.stop="delType(item.id)"><i class="nz-icon nz-icon-delete"></i></span>
-                  <span v-if="!item.isEdit" class="dropdown-btn dropdown-btn-edit" :id="'model-type-op-edit-' + item.id" @click.stop="editType(item)"><i class="nz-icon nz-icon-edit"></i></span>
-                  <span v-else class="dropdown-btn dropdown-btn-edit" :id="'model-type-op-edit-' + item.id" @click.stop="saveType(item)"><i class="nz-icon nz-icon-check"></i></span>
+                  <span :id="'model-type-op-del-' + item.id" @click.stop="delType(item.id)" class="dropdown-btn dropdown-btn-delete" v-has="'model_type_delete'"><i class="nz-icon nz-icon-delete"></i></span>
+                  <span :id="'model-type-op-edit-' + item.id" @click.stop="editType(item)" class="dropdown-btn dropdown-btn-edit" v-has="'model_type_toEdit'" v-if="!item.isEdit"><i class="nz-icon nz-icon-edit"></i></span>
+                  <span :id="'model-type-op-edit-' + item.id" @click.stop="saveType(item)" class="dropdown-btn dropdown-btn-edit" v-else v-has="'model_type_save'"><i class="nz-icon nz-icon-check"></i></span>
                 </div>
               </div>
             </template>
@@ -57,9 +57,9 @@
                 <span v-if="!item.isEdit">{{item.value}}</span>
                 <span v-else @click.stop="inputHandler(item)"><el-input size="mini" v-model="editingVendor"></el-input></span>
                 <div class="dropdown-btns" v-show="dropdownHoverItem == 'vendor' + item.id">
-                  <span class="dropdown-btn dropdown-btn-delete" :id="'model-vendor-op-del-' + item.id" @click.stop="delVendor(item.id)"><i class="nz-icon nz-icon-delete"></i></span>
-                  <span v-if="!item.isEdit" class="dropdown-btn dropdown-btn-edit" :id="'model-vendor-op-edit-' + item.id" @click.stop="editVendor(item)"><i class="nz-icon nz-icon-edit"></i></span>
-                  <span v-else class="dropdown-btn dropdown-btn-edit" :id="'model-type-op-edit-' + item.id" @click.stop="saveVendor(item)"><i class="nz-icon nz-icon-check"></i></span>
+                  <span :id="'model-vendor-op-del-' + item.id" @click.stop="delVendor(item.id)" class="dropdown-btn dropdown-btn-delete" v-has="'model_vendor_delete'"><i class="nz-icon nz-icon-delete"></i></span>
+                  <span :id="'model-vendor-op-edit-' + item.id" @click.stop="editVendor(item)" class="dropdown-btn dropdown-btn-edit" v-has="'model_vendor_toEdit'" v-if="!item.isEdit"><i class="nz-icon nz-icon-edit"></i></span>
+                  <span :id="'model-type-op-edit-' + item.id" @click.stop="saveVendor(item)" class="dropdown-btn dropdown-btn-edit" v-else v-has="'model_vendor_save'"><i class="nz-icon nz-icon-check"></i></span>
                 </div>
               </div>
             </template>
@@ -76,7 +76,7 @@
       <button @click="esc(false)" id="model-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="save" id="model-box-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="model-box-save" v-has="['model_save', 'asset_vendor_save']">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 42ae8d3b7..a945a9037 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -2,7 +2,7 @@
   <div class="right-box right-box-module" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
-      <button id="module-del" type="button" v-if="editModule.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
+      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="module-del" type="button" v-has="'project_module_delete'" v-if="editModule.id">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
@@ -308,7 +308,7 @@
       <button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="save" id="module-box-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="module-box-save" v-has="'project_module_save'">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index 877ff080a..e1936fe00 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -3,7 +3,7 @@
     <div class="right-box right-box-panel z-top" v-if="rightBox.show" v-clickoutside="clickos">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns right-box-form-delete">
-        <button type="button" v-if="panel.id != ''" @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82">
+        <button @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82" type="button" v-has="'panel_delete'" v-if="panel.id != ''">
           <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
           <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
         </button>
@@ -29,7 +29,7 @@
         <button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
           <span>{{$t('overall.cancel')}}</span>
         </button>
-        <button @click="save" id="module-box-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
+        <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="module-box-save" v-has="'panel_save'">
           <span>{{$t('overall.save')}}</span>
         </button>
       </div>
diff --git a/nezha-fronted/src/components/common/rightBox/projectBox.vue b/nezha-fronted/src/components/common/rightBox/projectBox.vue
index 32a5628f4..78f71dd0f 100644
--- a/nezha-fronted/src/components/common/rightBox/projectBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue
@@ -2,7 +2,7 @@
   <div class="right-box right-box-project" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
-      <button id="project-del" type="button" v-if="project.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien">
+      <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="project-del" type="button" v-has="'project_delete'" v-if="project.id">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
       </button>
@@ -28,7 +28,7 @@
       <button @click="esc" id="project-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="save" id="project-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="project-save" v-has="'project_save'">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
diff --git a/nezha-fronted/src/components/common/rightBox/promServerBox.vue b/nezha-fronted/src/components/common/rightBox/promServerBox.vue
index 1e14306b4..8575a3f31 100644
--- a/nezha-fronted/src/components/common/rightBox/promServerBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/promServerBox.vue
@@ -2,7 +2,7 @@
   <div class="right-box right-box-prom" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
-      <button type="button" v-if="editPromServer.id" @click="del"
+      <button @click="del" type="button" v-has="'prom_delete'" v-if="editPromServer.id"
               class="nz-btn nz-btn-size-normal nz-btn-size-alien"
               id="promServer-edit-del">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
@@ -57,7 +57,7 @@
               class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="save" id="prom-save"
+      <button @click="save" id="prom-save" v-has="'prom_save'"
               class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
         <span>{{$t('overall.save')}}</span>
       </button>
diff --git a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
index 8147218a0..4534ab18a 100644
--- a/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
@@ -19,7 +19,7 @@
       <button type="button" @click="esc" id="project-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button type="button" @click="save" id="project-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="project-save" type="button" v-has="'dc_trafficSetting_save'">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index d2015ec6a..792502cdf 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -33,16 +33,17 @@
           <div class="top-tool-search float-right">
             <search-input :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
           </div>
-          <pick-time  :showTimePicker="false" class="float-right pickTime margin-l-20" :refresh-data-func="getTableData" v-model="searchTime" :use-chart-unit="false" ref="pickTime"></pick-time>
+          <pick-time :refresh-data-func="getTableData" :showTimePicker="false" :use-chart-unit="false" class="float-right pickTime margin-l-20" ref="pickTime" v-model="searchTime"></pick-time>
           <export-excel
             export-file-name="AlertRule"
             export-url="/alert/rule/export"
             import-url="/alert/rule/import"
             :params="searchLabel"
+            :permissions="{import: 'rule_import', export: 'rule_export'}"
             @afterImport="getTableData"
           >
             <template slot="optionZone">
-              <button id="alert-add" @click="add"  :title="$t('overall.createAlertRule')"
+              <button :title="$t('overall.createAlertRule')" @click="add" id="alert-add" v-has="'rule_toAdd'"
                       class="nz-btn nz-btn-size-normal nz-btn-style-light">
                 <i class="nz-icon-create-square nz-icon"></i>
               </button>
@@ -98,8 +99,8 @@
           <template slot-scope="scope" :column="item">
             <div v-if="item.prop == 'option'" class="content-right-options">
               <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>&nbsp;
-              <span v-if="scope.row.buildIn != 1" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>&nbsp;
-              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i  class="nz-icon nz-icon-delete"></i></span>
+              <span :id="'alert-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'rule_toEdit'" v-if="scope.row.buildIn != 1"><i class="nz-icon nz-icon-edit"></i></span>&nbsp;
+              <span :id="'alert-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'rule_delete'"><i  class="nz-icon nz-icon-delete"></i></span>
             </div>
             <span v-else-if="item.prop == 'severity'" class="severity">
               <span v-if="scope.row[item.prop] == 'P1'" class="P1">P1</span>
@@ -136,7 +137,7 @@
       </div>
     </div>
     <transition name="el-zoom-in-bottom">
-      <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.alertRule" :is-full-screen="bottomBox.isFullScreen" :from="'alertRule'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.ruleDetail"
+      <bottom-box :detail="bottomBox.ruleDetail" :from="$CONSTANTS.fromRoute.rule" :is-full-screen="bottomBox.isFullScreen" :obj="bottomBox.alertRule" :sub-resize-show="bottomBox.subResizeShow" :target-tab.sync="bottomBox.targetTab" v-if="bottomBox.showSubList"
                   @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
     </transition>
     <transition name="right-box">
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index 9b178ef91..03eee5ce0 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -26,11 +26,11 @@
             <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
           </div>
           <pick-time  :showTimePicker="false" class="float-right pickTime margin-l-20" :refresh-data-func="getAlertList" v-model="searchTimeSelect" :use-chart-unit="false" ref="pickTime"></pick-time>
-          <button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"
+          <button :title="$t('overall.exportExcelLower')" @click="showExportDialog" type="button" v-has="'message_export'"
                   class="nz-btn nz-btn-size-normal nz-btn-style-light" id="alert-list-export">
             <i class="nz-icon nz-icon-download1"></i>
           </button>
-          <delete-button :delete-objs="batchDeleteObjs" api="alert/message" @after="getAlertList" :clickFunction="openDelMessageBox"></delete-button>
+          <delete-button :clickFunction="openDelMessageBox" :delete-objs="batchDeleteObjs" @after="getAlertList" api="alert/message" v-has="'message_delete'"></delete-button>
         </div>
         <div class="pagination-top pagination-top-hide display-none"></div>
       </div>
@@ -41,6 +41,7 @@
         :tableHeight="mainTableHeight"
         :tableId="tableId"
         @tableDataSort="tableDataSort"
+        :from="$CONSTANTS.fromRoute.message"
         @deleteMessage="deleteMessage"
         @select-change="(selection)=>{this.batchDeleteObjs=selection}"
       ></alertMessageTable>
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index a98efcd20..019203892 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -10,17 +10,18 @@
             export-url="/asset/export"
             import-url="/asset/import"
             :params="searchLabel"
+            :permissions="{import: 'asset_import', export: 'asset_export'}"
             @afterImport="afterTableListChange"
           >
             <template slot="optionZone">
-              <button @click.stop="add" :title="$t('overall.createAsset')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset">
+              <button :title="$t('overall.createAsset')" @click.stop="add" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset" v-has="'asset_toAdd'">
                 <i class="nz-icon nz-icon-create-square"></i></button>
             </template>
           </export-excel>
-          <button style="margin-left: 15px" @click.stop="batchEdit" :title="$t('overall.batchEdit')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-batch-asset">
+          <button :title="$t('overall.batchEdit')" @click.stop="batchEdit" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-batch-asset" style="margin-left: 15px" v-has="'asset_toBatchEdit'">
             <i class="nz-icon nz-icon-batch-edit"></i>
           </button>
-          <delete-button :delete-objs="batchDeleteObjs" api="asset" @after="afterTableListChange"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" @after="afterTableListChange" api="asset" v-has="'asset_delete'"></delete-button>
         </div>
         <div class="pagination-top pagination-top-hide display-none"></div>
       </div>
@@ -147,22 +148,22 @@
               class="nz-icon nz-icon-view"></i>
             </span>
               &nbsp;
-              <span :title="$t('overall.edit')" @click.stop="edit(scope.row)" class="content-right-option" :id="'asset-edit-'+scope.row.id"><i
+              <span :id="'asset-edit-'+scope.row.id" :title="$t('overall.edit')" @click.stop="edit(scope.row)" class="content-right-option" v-has="'asset_toEdit'"><i
                 class="nz-icon nz-icon-edit"></i>
             </span>
               &nbsp;
-              <span :title="$t('overall.delete')" @click.stop="del(scope.row)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i
+              <span :id="'asset-del-'+scope.row.id" :title="$t('overall.delete')" @click.stop="del(scope.row)" class="content-right-option" v-has="'asset_delete'"><i
                 class="nz-icon nz-icon-delete"></i>
             </span>
               &nbsp;
-              <el-dropdown trigger="hover" @command="cli">
+            <el-dropdown @command="cli" trigger="hover" v-has="'asset_connect'">
               <span title="CLI" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
                 class="nz-icon nz-icon-cli" :class="{'gray-filter': !scope.row.accounts || scope.row.accounts.length == 0 || (scope.row.accounts.length==1&&scope.row.accounts.find(t=>t.protocol == 'SNMP'))}"></i>
               </span>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item v-for="(account, index) in scope.row.accounts" v-if="account && account.protocol != 'SNMP'" :key="index" :command="[scope.row.id ,scope.row.host, account]">{{account.protocol}}</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="[scope.row.id ,scope.row.host, account]" :key="index" v-for="(account, index) in scope.row.accounts" v-if="account && account.protocol != 'SNMP'">{{account.protocol}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
             </template>
           </template>
         </el-table-column>
@@ -180,7 +181,7 @@
       </div>
     </div>
     <transition name="el-zoom-in-bottom">
-      <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.asset" :isFullScreen="bottomBox.isFullScreen" :from="'asset'" :targetTab.sync="bottomBox.targetTab" :detail="bottomBox.assetDetail"
+      <bottom-box :detail="bottomBox.assetDetail" :from="$CONSTANTS.fromRoute.asset" :isFullScreen="bottomBox.isFullScreen" :obj="bottomBox.asset" :sub-resize-show="bottomBox.subResizeShow" :targetTab.sync="bottomBox.targetTab" v-if="bottomBox.showSubList"
                   @reload="getTableData"
                   @closeSubList="bottomBox.showSubList = false"
                   @fullScreen="fullScreen"
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index ada6f4bbf..c610d48f8 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -14,11 +14,11 @@
           <div class="top-tool-search">
             <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
           </div>
-          <button type="button" @click="add" :title="$t('overall.createAccount')"
+          <button :title="$t('overall.createAccount')" @click="add" type="button" v-has="'account_toAdd'"
                   class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="account-add">
             <i class="nz-icon-create-square nz-icon"></i>
           </button>
-          <delete-button :delete-objs="batchDeleteObjs" api="sys/user/delete" @after="getTableData" :filter-function="(arr)=>{return '?userIds='+arr.map(t=>t.userId).join(',')}"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?userIds='+arr.map(t=>t.userId).join(',')}" @after="getTableData" api="sys/user/delete" v-has="'account_delete'"></delete-button>
         </div>
         <!-- 顶部分页组件，当打开底部上滑框时出现 -->
         <div class="pagination-top pagination-top-hide display-none"></div>
@@ -68,11 +68,9 @@
           </template>
           <template slot-scope="scope" :column="item">
             <div v-if="item.prop == 'option'" class="content-right-options">
-              <!--<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
-              &nbsp;-->
-              <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'account-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+              <span :id="'account-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'account_toEdit'"><i class="nz-icon nz-icon-edit"></i></span>
               &nbsp;
-              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
+              <span :id="'account-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'account_delete'"><i class="nz-icon nz-icon-delete"></i></span>
             </div>
             <span v-else-if="item.prop == 'lang'">
                 {{scope.row[item.prop] == 'en' ? 'English' : ''}}
@@ -88,7 +86,7 @@
                   active-value="1"
                   inactive-value="0"
                   active-color="#ee9d3f"
-                  :disabled="isCurrentUser(scope.row.username)"
+                  :disabled="isCurrentUser(scope.row.username) || !hasButton('account_toEdit')"
                   @change="(val)=>{statusChange(scope.row)}">
                 </el-switch>
             </span>
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index 8da53c217..439b55992 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -13,11 +13,11 @@
           <div class="top-tool-search">
             <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
           </div>
-          <button type="button" @click="add" :title="$t('overall.createDatacenter')"
+          <button :title="$t('overall.createDatacenter')" @click="add" type="button" v-has="'dc_toAdd'"
                   class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add">
             <i class="nz-icon-create-square nz-icon"></i>
           </button>
-          <delete-button :delete-objs="batchDeleteObjs" api="idc" @after="getTableData"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" api="idc" v-has="'dc_delete'"></delete-button>
         </div>
         <div class="pagination-top pagination-top-hide display-none"></div>
       </div>
@@ -64,11 +64,11 @@
         >
           <template slot-scope="scope" :column="item">
             <div v-if="item.prop == 'option'" class="content-right-options">
-              <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+              <span :id="'dc-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'dc_toEdit'"><i class="nz-icon nz-icon-edit"></i></span>
               &nbsp;
-              <span :title="$t('config.dc.traffic.title')" @click="configTraffic(scope.row)" class="content-right-option" :id="'dc-setting-'+scope.row.id" ><i class="nz-icon nz-icon-gear"></i></span>
+              <span :id="'dc-setting-'+scope.row.id" :title="$t('config.dc.traffic.title')" @click="configTraffic(scope.row)" class="content-right-option" v-has="'dc_trafficSetting'" ><i class="nz-icon nz-icon-gear"></i></span>
               &nbsp;
-              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
+              <span :id="'dc-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'dc_delete'"><i class="nz-icon nz-icon-delete"></i></span>
             </div>
             <template v-else-if="item.prop == 'principal'">
               <template v-if="scope.row.principal">
@@ -83,6 +83,7 @@
                 v-model="scope.row.state"
                 active-value="ON"
                 inactive-value="OFF"
+                :disabled="!hasButton('dc_toEdit')"
                 active-color="#ee9d3f"
                 @change="(val)=>{statusChange(scope.row)}"
               />
@@ -130,7 +131,7 @@
       </div>
     </div>
     <transition name="el-zoom-in-bottom">
-      <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.dc" :is-full-screen="bottomBox.isFullScreen" :from="'dc'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.dcDetail"
+      <bottom-box :detail="bottomBox.dcDetail" :from="$CONSTANTS.fromRoute.dc" :is-full-screen="bottomBox.isFullScreen" :obj="bottomBox.dc" :sub-resize-show="bottomBox.subResizeShow" :target-tab.sync="bottomBox.targetTab" v-if="bottomBox.showSubList"
                   @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
     </transition>
     <!--dc table end-->
diff --git a/nezha-fronted/src/components/page/config/mib.vue b/nezha-fronted/src/components/page/config/mib.vue
index b40ffeadc..09f8f3029 100644
--- a/nezha-fronted/src/components/page/config/mib.vue
+++ b/nezha-fronted/src/components/page/config/mib.vue
@@ -19,11 +19,10 @@
           <div class="top-tool-search">
             <search-input :searchMsg="searchMsg" @search="search"></search-input>
           </div>
-          <button type="button" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light  margin-l-20"  :title="$t('overall.createMib')"
-                  id="mib-add">
+          <button :title="$t('overall.createMib')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light  margin-l-20" id="mib-add"  type="button" v-has="'snmp_file_toAdd'">
             <i class="nz-icon-create-square nz-icon"></i>
           </button>
-          <delete-button :delete-objs="batchDeleteObjs" api="mib" @after="getTableData"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" api="mib" v-has="'snmp_file_delete'"></delete-button>
         </div>
       </div>
       <!-- 自定义table列 -->
@@ -52,7 +51,7 @@
           <template slot-scope="scope" :column="item">
             <template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
             <template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" >
-              <span class="link" @click="downloadMib(scope.row)">{{scope.row[item.prop]}}</span>
+              <span @click="downloadMib(scope.row)" class="link" v-has="'snmp_file_download'">{{scope.row[item.prop]}}</span>
             </template>
             <template v-else-if="item.prop == 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
               <div style="height: 100%">
@@ -84,11 +83,11 @@
             </template>
             <span v-else-if="item.prop == 'updateAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
             <div v-else-if="item.prop == 'option'" class="content-right-options">
-              <span :title="$t('overall.download')" @click="downloadMib(scope.row)" class="content-right-option" :id="'mib-download-'+scope.row.id"><i class="nz-icon nz-icon-download1"></i></span>
+              <span :id="'mib-download-'+scope.row.id" :title="$t('overall.download')" @click="downloadMib(scope.row)" class="content-right-option" v-has="'snmp_file_download'"><i class="nz-icon nz-icon-download1"></i></span>
               &nbsp;
-              <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'mib-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+              <span :id="'mib-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'snmp_file_toEdit'"><i class="nz-icon nz-icon-edit"></i></span>
               &nbsp;
-              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'mib-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
+              <span :id="'mib-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'snmp_file_delete'"><i class="nz-icon nz-icon-delete"></i></span>
             </div>
             <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
             <template v-else>-</template>
diff --git a/nezha-fronted/src/components/page/config/mibBrowser.vue b/nezha-fronted/src/components/page/config/mibBrowser.vue
index f1714c757..9b6622132 100644
--- a/nezha-fronted/src/components/page/config/mibBrowser.vue
+++ b/nezha-fronted/src/components/page/config/mibBrowser.vue
@@ -215,7 +215,7 @@
         <div class="mib-browser-table-title">
           <span>Result table</span>
           <span>
-            <span @click="exportXlsx" class="mib-browser-table-op" :class="{'mib-browser-table-op-light': resultData.length == 0}" :title="$t('overall.exportExcel')"><i class="nz-icon nz-icon-download1"></i></span>
+            <span :class="{'mib-browser-table-op-light': resultData.length == 0}" :title="$t('overall.exportExcel')" @click="exportXlsx" class="mib-browser-table-op" v-has="'snmp_browser_export'"><i class="nz-icon nz-icon-download1"></i></span>
             <span @click="clearResult" class="mib-browser-table-op" :title="$t('overall.clear')"><i class="nz-icon nz-icon-close"></i></span>
           </span>
         </div>
diff --git a/nezha-fronted/src/components/page/config/model.vue b/nezha-fronted/src/components/page/config/model.vue
index c84f06a81..fd8407ba0 100644
--- a/nezha-fronted/src/components/page/config/model.vue
+++ b/nezha-fronted/src/components/page/config/model.vue
@@ -12,9 +12,8 @@
           <div class="top-tool-search">
             <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
           </div>
-          <button @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20"  :title="$t('overall.createModel')"
-                  id="model-add">
-                    <i class="nz-icon-create-square nz-icon"></i>
+          <button :title="$t('overall.createModel')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="model-add" v-has="'model_toAdd'">
+            <i class="nz-icon-create-square nz-icon"></i>
           </button>
           <delete-button :delete-objs="batchDeleteObjs" api="model" @after="getTableData"></delete-button>
         </div>
@@ -74,9 +73,9 @@
                 </el-popover>
             </template>
             <div v-else-if="item.prop == 'option'" class="content-right-options">
-              <span :title="$t('dashboard.panel.title')" @click="panel(scope.row)" class="content-right-option" :id="'model-panel-'+scope.row.id"><i class="nz-icon nz-icon-template"></i></span>
-              <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'model-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'model-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
+              <span :id="'model-panel-'+scope.row.id" :title="$t('dashboard.panel.title')" @click="panel(scope.row)" class="content-right-option" v-has="'model_panel'"><i class="nz-icon nz-icon-template"></i></span>
+              <span :id="'model-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'model_toEdit'"><i class="nz-icon nz-icon-edit"></i></span>
+              <span :id="'model-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'model_delete'"><i class="nz-icon nz-icon-delete"></i></span>
             </div>
             <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
             <template v-else>-</template>
@@ -96,7 +95,7 @@
       </div>
     </div>
     <transition name="el-zoom-in-bottom">
-      <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-fullscreen="bottomBox.isFullScreen" from="model" :target-tab.sync="bottomBox.targetTab" :obj="bottomBox.model"
+      <bottom-box :from="$CONSTANTS.fromRoute.model" :is-fullscreen="bottomBox.isFullScreen" :obj="bottomBox.model" :sub-resize-show="bottomBox.subResizeShow" :target-tab.sync="bottomBox.targetTab" v-if="bottomBox.showSubList"
                   @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ref="panelBox"></bottom-box>
     </transition>
     <transition name="right-box">
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index 0c9a39627..f14b04869 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -12,11 +12,11 @@
           <div class="top-tool-search">
             <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
           </div>
-          <button type="button" @click="add" :title="$t('overall.createPrometheusServer')"
+          <button :title="$t('overall.createPrometheusServer')" @click="add" type="button" v-has="'prom_toAdd'"
                   class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="prom-add">
             <i class="nz-icon-create-square nz-icon"></i>
           </button>
-          <delete-button :delete-objs="batchDeleteObjs" api="promServer" @after="getTableData"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" api="promServer" v-has="'prom_delete'"></delete-button>
         </div>
         <div class="pagination-top pagination-top-hide display-none"></div>
       </div>
@@ -67,9 +67,9 @@
             <div v-else-if="item.prop == 'option'" class="content-right-options">
               <!--<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'prom-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
               &nbsp;-->
-              <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'prom-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+              <span :id="'prom-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'prom_toEdit'"><i class="nz-icon nz-icon-edit"></i></span>
               &nbsp;
-              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'prom-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
+              <span :id="'prom-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'prom_delete'"><i class="nz-icon nz-icon-delete"></i></span>
             </div>
             <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
             <template v-else>-</template>
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index ff020e2c4..eec5b72e7 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -40,7 +40,7 @@
             </el-form-item>
             <el-form-item>
               <button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" @click="resetForm('basicForm','basic')" style="top:2px">{{$t('overall.reset')}}</button>
-              <button type="button" @click="saveSetInfo('basic','basicForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">{{$t('overall.submit')}}</button>
+              <button @click="saveSetInfo('basic','basicForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_basic_save'">{{$t('overall.submit')}}</button>
             </el-form-item>
           </el-form>
         </div>
@@ -87,7 +87,7 @@
             <el-form-item>
               <button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" @click="resetForm('emailForm','email')" style="top:2px">{{$t('overall.reset')}}</button>
               <button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" :class="{'nz-btn-disabled':email.email_enable == 'off'}" :disabled="email.email_enable == 'off'" @click="testSetInfo('email','emailForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</button>
-              <button type="button" @click="saveSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">{{$t('overall.submit')}}</button>
+              <button @click="saveSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_email_save'">{{$t('overall.submit')}}</button>
             </el-form-item>
           </el-form>
         </div>
@@ -99,7 +99,7 @@
               <el-input-number v-model="terminal.max_terminal_num" controls-position="right" :min="1" :max="50"></el-input-number>
             </el-form-item>
             <el-form-item>
-              <button type="button" @click="saveSetInfo('terminal','terminalForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">{{$t('overall.submit')}}</button>
+              <button @click="saveSetInfo('terminal','terminalForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_terminal_save'">{{$t('overall.submit')}}</button>
             </el-form-item>
           </el-form>
         </div>
@@ -131,7 +131,7 @@
             <el-form-item>
               <button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" @click="resetForm('ldapForm','ldap')" style="top:2px">{{$t('overall.reset')}}</button>
               <button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" @click="testSetInfo('ldap','ldapForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</button>
-              <button type="button" @click="saveSetInfo('ldap','ldapForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">{{$t('overall.submit')}}</button>
+              <button @click="saveSetInfo('ldap','ldapForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_ldap_save'">{{$t('overall.submit')}}</button>
             </el-form-item>
           </el-form>
         </div>
@@ -191,7 +191,7 @@
                 <el-input  v-model="notificationTemp.filePath" class="linkUrl"/>
               </el-form-item>
               <el-form-item  prop="btn">
-                <i class="nz-icon-create-square nz-icon" @click="notificationAdd"></i>
+                <i @click="notificationAdd" class="nz-icon-create-square nz-icon" v-has="'system_notification_add'"></i>
               </el-form-item>
             </el-form>
           </div>
@@ -217,7 +217,7 @@
                     <el-input  v-model="item.filePath" width="460px" />
                   </el-form-item>
                   <el-form-item  prop="btn">
-                    <button type="button" class="linkBtn nz-btn nz-btn-size-small-new nz-btn-style-normal-new" @click="notificationUpdate(item)">Update</button>
+                    <button @click="notificationUpdate(item)" class="linkBtn nz-btn nz-btn-size-small-new nz-btn-style-normal-new" type="button" v-has="'system_notification_update'">Update</button>
                     <button type="button" class="linkBtn nz-btn nz-btn-size-small-new nz-btn-style-light-new" @click="notificationCancel(item)">Cancel</button>
                   </el-form-item>
                 </el-form>
@@ -231,8 +231,8 @@
                     <!--</span>-->
                   </div>
                   <div class="linkFormBtn">
-                    <i class="nz-icon nz-icon-edit" @click.stop="notificationEdit(item)"></i>
-                    <i class="nz-icon nz-icon-delete" @click="notificationDel(item)"></i>
+                    <i @click.stop="notificationEdit(item)" class="nz-icon nz-icon-edit" v-has="'system_notification_edit'"></i>
+                    <i @click="notificationDel(item)" class="nz-icon nz-icon-delete" v-has="'system_notification_delete'"></i>
                   </div>
                 </div>
               </div>
@@ -259,7 +259,7 @@
                 <el-input  v-model="linkTemp.url" class="linkUrl"/>
               </el-form-item>
               <el-form-item  prop="btn">
-                <i class="nz-icon-create-square nz-icon" @click="linkAdd"></i>
+                <i @click="linkAdd" class="nz-icon-create-square nz-icon" v-has="'system_link_add'"></i>
               </el-form-item>
             </el-form>
           </div>
@@ -284,22 +284,20 @@
                   <el-input  v-model="item.url" width="460px" />
                 </el-form-item>
                 <el-form-item  prop="btn">
-                  <button type="button" class="linkBtn nz-btn nz-btn-size-small-new nz-btn-style-normal-new" @click="linkUpdate(item)">Update</button>
+                  <button @click="linkUpdate(item)" class="linkBtn nz-btn nz-btn-size-small-new nz-btn-style-normal-new" type="button" v-has="'system_link_update'">Update</button>
                   <button type="button" class="linkBtn nz-btn nz-btn-size-small-new nz-btn-style-light-new" @click="linkCancel(item)">Cancel</button>
                 </el-form-item>
               </el-form>
                 <div class="linkFormContent" v-else>
                   <div class="linkTitleName" :title="item.name">{{item.name}}</div>
                   <div class="linkTitleUrl">
-                    <span class="linkTitleUrlContent" @click="openUrl(item)" @dblclick.stop="linkEdit(item)">
-                      <!--<el-tooltip class="item" effect="dark" :content="item.url" placement="top" popper-class="linkUrlTip">-->
+                    <span @click="openUrl(item)" @dblclick.stop="linkEdit(item)" class="linkTitleUrlContent" v-has="'system_link_edit'">
                       <span>{{item.url}}</span>
-                      <!--</el-tooltip>-->
                     </span>
                   </div>
                   <div class="linkFormBtn">
-                    <i class="nz-icon nz-icon-edit" @click.stop="linkEdit(item)" v-if="item.buildIn=='0'"></i>
-                    <i class="nz-icon nz-icon-delete" @click="linkDel(item)" v-if="item.buildIn=='0'"></i>
+                    <i @click.stop="linkEdit(item)" class="nz-icon nz-icon-edit" v-has="'system_link_edit'" v-if="item.buildIn=='0'"></i>
+                    <i @click="linkDel(item)" class="nz-icon nz-icon-delete" v-has="'system_link_delete'" v-if="item.buildIn=='0'"></i>
                   </div>
                 </div>
               </div>
@@ -329,7 +327,7 @@
               </div>
             </el-form-item>
             <el-form-item>
-              <button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" @click="resetSys()" style="top:2px">{{$t('overall.reset')}}</button>
+              <button @click="resetSys()" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" style="top:2px" type="button" v-has="'system_reset_reset'">{{$t('overall.reset')}}</button>
             </el-form-item>
           </el-form>
         </div>
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 1b22e1f85..e81d5b6c3 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -258,7 +258,7 @@
           </el-radio-group>
         </el-form-item>
         <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'value'">
-          <template  v-for="(mapping,index) in editChart.param.valueMapping.mapping">
+          <template v-for="(mapping,index) in editChart.param.valueMapping.mapping">
             <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" prop="span" class="half-form-item-other" >
               <el-input size="mini" type="input" v-model="mapping.value" style="display: inline-block;;"></el-input>
             </el-form-item>
@@ -269,7 +269,7 @@
           </template>
         </template>
         <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'">
-          <template  v-for="(mapping,index) in editChart.param.valueMapping.mapping">
+          <template v-for="(mapping,index) in editChart.param.valueMapping.mapping">
             <div class="half-form-item-other" style="display: inline-block;margin-left: 70px">
               <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" prop="span" class="one-third-form-item-left" >
                 <el-input size="mini" type="input" v-model="mapping.from"></el-input>
@@ -287,7 +287,7 @@
 
         <!--value mapping end-->
         <template v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'">
-          <div  class="right-box-sub-title" >
+          <div class="right-box-sub-title" >
             <span>{{$t('dashboard.panel.chartForm.legendValue')}}</span>
           </div>
           <div style="margin-bottom: 20px; width: 100%" ></div>
@@ -319,13 +319,13 @@
       <button @click="esc(false)" id="chart-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="SyncSave" id="chart-box-Sync" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" v-if="showPanel.type && showPanel.type == 'model'">
+      <button @click="SyncSave" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="chart-box-Sync" v-has:all="[`${from}_chart_save`, `${from}_chart_sync`]" v-if="showPanel.type && showPanel.type == 'model'">
         <span>{{$t('overall.SyncSave')}}</span>
       </button>
       <button @click="preview" id="chart-box-preview" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" v-else>
         <span>{{$t('overall.preview')}}</span>
       </button>
-      <button @click="confirmAdd" id="chart-box-save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
+      <button @click="confirmAdd" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" id="chart-box-save" v-has="`${from}_chart_save`">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
@@ -354,10 +354,11 @@
   export default {
     name: "chartBox",
     props: {
-      boxClass:String,
+      boxClass: String,
       panelData: Array,
       showPanel: Object,
-      chart: Object
+      chart: Object,
+      from: {type: String}
     },
     mixins: [rz],
     data() {
diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
index 4ef3c2583..12d2b6090 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
@@ -7,7 +7,7 @@
             <pick-time :refresh-data-func="expressionChange" v-model="filterTime" @unitChange="chartUnitChange" ref="pickTime">
               <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
             </pick-time>
-            <button :disabled="saveDisabled" type="button" @click="saveChart"
+            <button :disabled="saveDisabled" @click="saveChart" type="button" v-has="'explore_chart_toAdd'"
                     class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
                     :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
               {{$t('dashboard.metric.saveChart')}}
@@ -201,7 +201,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
 
     </div>
     <transition name="right-box">
-      <chart-box v-if="rightBox.show" :chart="chart" ref="addChartModal" @close="handleBox(false)" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{id: -1, name: '', type: 'explore'}"></chart-box>
+      <chart-box :chart="chart" :from="$CONSTANTS.explore" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'explore'}" @close="handleBox(false)" @on-create-success="createSuccess" ref="addChartModal" v-if="rightBox.show"></chart-box>
     </transition>
   </div>
 </template>
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index bc64796c4..fbcd3ddd4 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -2,7 +2,7 @@
   <div class="panel">
     <div class="top-tools">
       <div class="top-tool-main-left" v-if="panelData.length == 0" style="margin-left: 10px;">
-        <button @click="toAdd" class="nz-btn nz-btn-style-light nz-btn-size-small"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t("dashboard.panel.createPanelTitleSec")}}</button>
+        <button @click="toAdd" class="nz-btn nz-btn-style-light nz-btn-size-small" v-has="'panel_toAdd'"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t("dashboard.panel.createPanelTitleSec")}}</button>
       </div>
       <template v-else>
         <div class="top-tool-main-left">
@@ -17,32 +17,31 @@
                 <el-dropdown-item >
                   <el-row class="panel-list-width" :gutter="10" >
                     <el-col :span="21"><el-input size="mini" v-model="filterPanel"  @click.native.stop="filterPanelFocus($event)" @input="filterPanelFunc" clearable :placeholder="$t('overall.search')"></el-input></el-col>
-                    <el-col :span="3"><span :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd"><i class="nz-icon nz-icon-plus"></i></span></el-col>
+                    <el-col :span="3"><span :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd" v-has="'panel_toAdd'"><i class="nz-icon nz-icon-plus"></i></span></el-col>
                   </el-row>
                 </el-dropdown-item>
                 <draggable v-model="panelData" @start="start" @end="end" :move="move" :key
                            :scroll-sensitivity="150"
                            :options="{
-               group:{name:'chartGroup',pull:'false'},
-               dragClass:'drag-chart-class',
-               fallbackClass:'fallback-class',
-               forceFallback:true,
-               ghostClass:'chart-ghost',
-               chosenClass:'choose-class',
-               scroll:true,
-               scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
-               animation:150,
-               handle:'.panelContent',
-             }"  >
+                               group:{name:'chartGroup',pull:'false'},
+                               dragClass:'drag-chart-class',
+                               fallbackClass:'fallback-class',
+                               forceFallback:true,
+                               ghostClass:'chart-ghost',
+                               chosenClass:'choose-class',
+                               scroll:true,
+                               scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
+                               animation:150,
+                               handle:'.panelContent',
+                             }"  >
                   <el-dropdown-item v-for="item in showPanelList" :key="item.id+1" class="panel-title-li"
                                     :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
-                    <!--{{item.name}}-->
                     <el-row  :gutter="10" class="panel-list-width" >
                       <el-col :span="2" class="panelContent move-area"><i class="nz-icon nz-icon-sort4"></i></el-col>
                       <el-col :span="17" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
-                      <el-col :span="1"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="nz-icon nz-icon-delete"></i></span></el-col>
+                      <el-col :span="1"><span @click.stop="del(item)" class="panel-dropdown-btn panel-dropdown-btn-delete" v-has="'panel_delete'"><i class="nz-icon nz-icon-delete"></i></span></el-col>
                       <el-col :span="1">&nbsp;</el-col>
-                      <el-col :span="1"><span class="panel-dropdown-btn" @click.stop="edit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
+                      <el-col :span="1"><span @click.stop="edit(item)" class="panel-dropdown-btn" v-has="'panel_toEdit'"><i class="nz-icon nz-icon-edit"></i></span></el-col>
                     </el-row>
                   </el-dropdown-item>
                 </draggable>
@@ -63,10 +62,14 @@
             export-url="/panel/export"
             import-url="/panel/import"
             :params="filter"
+            :permissions="{
+              import: 'panel_chart_import',
+              export: 'panel_chart_export'
+            }"
             @afterImport="dateChange"
           >
             <template slot="optionZone">
-              <button @click="addChart" :title="$t('overall.createChart')"
+              <button :title="$t('overall.createChart')" @click="addChart" v-has="'panel_chart_toAdd'"
                       class="nz-btn nz-btn-size-normal nz-btn-style-light ">
                 <i class="nz-icon-create-square nz-icon"></i>
               </button>
@@ -78,15 +81,14 @@
     <div class="table-list" id="tableList">
       <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
         <div class="box-content">
-          <chart-list @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart"
-                      ref="chartList"></chart-list>
+          <chart-list :from="$CONSTANTS.fromRoute.panel" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList"></chart-list>
         </div>
       </el-scrollbar>
     </div>
     <button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
 
     <transition name="right-box">
-      <chart-box @close="closeChartBox" @delete-chart="delChart" :chart="chart" v-if="rightBox.chart.show" ref="addChartModal" :show-panel="showPanel" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>
+      <chart-box :chart="chart" :from="$CONSTANTS.fromRoute.panel" :panel-data="panelData" :show-panel="showPanel" @close="closeChartBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reload="panelReload" @reloadOnlyPanel="panelReloadOnlyPanel" ref="addChartModal" v-if="rightBox.chart.show"></chart-box>
     </transition>
     <transition name="right-box">
       <panel-box v-if="closePanelBox" :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
@@ -169,7 +171,7 @@
           panelId: 0,
           start_time: '',
           end_time: '',
-          searchName: ''
+          searchName: '',
         },
         panelId: 0,
         filterPanel:'',
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index b77c85dbb..13fa24337 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -38,17 +38,18 @@
               export-url="/endpoint/export"
               import-url="/endpoint/import"
               :params="endpointSearchLabel"
+              :permissions="{import: 'project_endpoint_import', export: 'project_endpoint_export'}"
               @afterImport="afterCloseImport"
               class="margin-l-20"
             >
               <template slot="optionZone">
-                <button @click.stop="addEndpoint" :title="$t('overall.createEndpoint')"
+                <button :title="$t('overall.createEndpoint')" @click.stop="addEndpoint" v-has="'project_endpoint_toAdd'"
                         class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
                   <i class="nz-icon nz-icon-create-square"></i>
                 </button>
               </template>
             </export-excel>
-            <delete-button :delete-objs="batchDeleteObjs" api="endpoint" @after="afterCloseImport"></delete-button>
+            <delete-button :delete-objs="batchDeleteObjs" @after="afterCloseImport" api="endpoint" v-has="'project_endpoint_delete'"></delete-button>
           </div>
           <div class="pagination-top pagination-top-hide display-none"></div>
         </div>
@@ -132,10 +133,10 @@
                 <span :title="$t('overall.query')" @click="query(scope.row)" class="content-right-option"
                       :id="'edp-query-'+scope.row.id"><i class="nz-icon nz-icon-search"></i></span>
                 &nbsp;
-                <span :title="$t('overall.edit')" @click="editEndpoint(scope.row)" class="content-right-option"
+                <span :title="$t('overall.edit')" @click="editEndpoint(scope.row)" class="content-right-option" v-has="'project_endpoint_toEdit'"
                       :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
 
-                <span :title="$t('overall.delete')" @click.stop="delEndpoint(scope.row)" class="content-right-option"
+                <span :title="$t('overall.delete')" @click.stop="delEndpoint(scope.row)" class="content-right-option" v-has="'project_endpoint_delete'"
                       :id="'asset-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
               </div>
               <span v-else-if="item.prop == 'state'">
@@ -185,7 +186,7 @@
       <bottom-box v-if="bottomBox.showSubList"
                   :sub-resize-show="bottomBox.subResizeShow"
                   :is-full-screen="bottomBox.isFullScreen"
-                  :from="'endpoint'"
+                  :from="$CONSTANTS.fromRoute.endpoint"
                   :target-tab.sync="bottomBox.targetTab"
                   :detail="bottomBox.endpointDetail"
                   :obj="endpoint"
diff --git a/nezha-fronted/src/http.js b/nezha-fronted/src/http.js
index 0167fcbd0..49aba7730 100644
--- a/nezha-fronted/src/http.js
+++ b/nezha-fronted/src/http.js
@@ -44,7 +44,11 @@ export function post(url, params,headers) {
     axios.post(url, params,{headers:headers}).then(response => {
       resolve(response.data)
     }).catch(err => {
-      resolve(err.response.data);
+      if(err.response){
+        resolve(err.response.data);
+      }else if(err.message){
+        resolve(err.message);
+      }
     })
   })
 }
@@ -54,8 +58,11 @@ export function put(url, params,headers) {
     axios.put(url, params,{headers:headers}).then(response => {
       resolve(response.data)
     }).catch(err => {
-      console.info(err)
-      resolve(err.response.data);
+      if(err.response){
+        resolve(err.response.data);
+      }else if(err.message){
+        resolve(err.message);
+      }
     })
   })
 }
@@ -65,8 +72,11 @@ export function del(url, params) {
     axios.delete(url, params).then(response => {
       resolve(response.data)
     }).catch(err => {
-      console.info(err)
-      resolve(err.response.data)
+      if(err.response){
+        resolve(err.response.data);
+      }else if(err.message){
+        resolve(err.message);
+      }
     })
   })
 }
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 7cdf1f06e..f535e302d 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -15,6 +15,7 @@ import router from './router'
 import VueResource from 'vue-resource'
 import axios from 'axios';
 import "./permission";
+import {hasPermission, hasButton} from "./permission";
 
 import plTable from 'pl-table'
 import 'pl-table/themes/index.css'
@@ -124,13 +125,12 @@ Vue.mixin({
           }
         })
       },
-      hasButton(button) {
-        return this.$store.buttonList.indexOf(button) > -1;
+      hasButton(code) {
+        return hasButton(this.$store.getters.buttonList, code);
       }
     },
     computed: {
       getMenuList() {
-        console.info(this.$store.state.user.menuList);
         return this.$store.state.user.menuList;
       },
       getButtonList() {
@@ -145,6 +145,7 @@ Vue.use(ElementUI);
 Vue.use(Vuex);
 Vue.use(VueResource);
 Vue.use(plTable);
+Vue.use(hasPermission);
 
 /*指令*/
 Vue.directive('clickoutside', clickoutside);
diff --git a/nezha-fronted/src/permission.js b/nezha-fronted/src/permission.js
index f0f4df8ac..212c2fa59 100644
--- a/nezha-fronted/src/permission.js
+++ b/nezha-fronted/src/permission.js
@@ -1,7 +1,12 @@
-import Vue from 'vue';
 import router from './router';
 import store from './store';
 import {post} from './http';
+import ElementUI from 'element-ui';
+import Vue from 'vue';
+import i18n from './components/common/i18n';
+import VueResource from 'vue-resource'
+
+Vue.use(VueResource);
 
 const loginWhiteList = ['/login']; // 免登陆白名单
 const permissionWhiteList = ['/login']; // 权限白名单
@@ -11,24 +16,28 @@ router.beforeEach((to, from, next) => {
     if (loginWhiteList.indexOf(to.path) !== -1) {
       next();
     } else {
-      new Promise(resolve => {
-        if (store.getters.menuList.length === 0) {
-          post("/sys/user/permissions", {token: sessionStorage.getItem("nz-token")}).then(res => {
-            store.commit("setMenuList", res.data.menus);
-            store.commit("setButtonList", res.data.buttons);
-            store.commit("setRoleList", res.data.roles);
+      let configUrl = "static/config.json?Timestamp=" + new Date().getTime();
+      let result = Vue.http.get(configUrl).then(res => {
+        new Promise(resolve => {
+          if (store.getters.menuList.length === 0) {
+            post(res.body.baseUrl + "/sys/user/permissions", {token: sessionStorage.getItem("nz-token")}).then(res => {
+              store.commit("setMenuList", sortByOrderNum(res.data.menus));
+              store.commit("setButtonList", res.data.buttons);
+              store.commit("setRoleList", res.data.roles);
+              resolve();
+            });
+          } else {
             resolve();
-          });
-        } else {
-          resolve();
-        }
-      }).then(res => {
-        let has = hasMenu(store.getters.menuList, to.path);
-        if (has) {
-          next();
-        } else {
-          next({ path: '/login'})
-        }
+          }
+        }).then(res => {
+          if (to.path) {
+            if (hasMenu(store.getters.menuList, to.path)) {
+              next();
+            } else {
+              ElementUI.Message.error(i18n.t("tip.noAccess"));
+            }
+          }
+        });
       });
     }
   } else {
@@ -40,14 +49,77 @@ router.beforeEach((to, from, next) => {
   }
 });
 
-function hasMenu(menuList, route) {
+//menuList中是否包含route权限
+export function hasMenu(menuList, route) {
   return menuList.some(menu => {
     if (menu.route == route) {
       return true;
     } else {
       if (menu.children) {
-        hasMenu(menu.children, route);
+        if (hasMenu(menu.children, route)) {
+          return true;
+        }
       }
     }
   });
 }
+
+export function hasButton(buttonList, code) {
+  return buttonList.some(button => button == code);
+}
+
+//用法 v-has="code" | v-has="[code...]" 任意匹配一个 | v-has:all="[code...]" 全匹配
+export const hasPermission = {
+  install (Vue, options) {
+    Vue.directive('has', {
+      inserted: (el, binding, vnode)=>{
+        //节点权限处理
+        let buttonCode = binding.value;
+        let arg = binding.arg;
+        if (buttonCode) {
+          if (buttonCode instanceof Array) {
+            let has = true;
+            if (arg && arg === 'all') { //全匹配
+              buttonCode.forEach(button => {
+                if (has) {
+                  has = hasButton(store.getters.buttonList, button);
+                }
+              });
+            } else { //任意匹配
+              has = buttonCode.some(button => {
+                return hasButton(store.getters.buttonList, button);
+              });
+            }
+            if (!has) {
+              el.parentNode.removeChild(el);
+            }
+          } else { //单个匹配
+            if (!hasButton(store.getters.buttonList, buttonCode)) {
+              el.parentNode.removeChild(el);
+            }
+          }
+        }
+      }
+    });
+  }
+};
+
+//根据orderNum排序
+export function sortByOrderNum(menuList) {
+  let r = menuList.sort((a, b) => {
+    return a.orderNum - b.orderNum;
+  });
+  r.forEach(menu => {
+    if (menu.children && getChildMenu(menu).length > 0) {
+      menu.children = menu.children.sort((a, b) => {
+        return a.orderNum - b.orderNum;
+      });
+      menu.route = menu.children[0].route;
+    }
+  });
+  return r;
+}
+
+function getChildMenu(menu) {
+  return menu.children.filter(m => m.type == 1);
+}
diff --git a/nezha-fronted/src/store/user.js b/nezha-fronted/src/store/user.js
index 783b21367..63d6ea46a 100644
--- a/nezha-fronted/src/store/user.js
+++ b/nezha-fronted/src/store/user.js
@@ -1,6 +1,8 @@
 import {post} from '../http';
 import router from '../router';
 import bus from '../libs/bus';
+import {sortByOrderNum} from "../permission";
+import store from "./index";
 
 const user = {
   state: {
@@ -40,13 +42,14 @@ const user = {
       localStorage.setItem('nz-sys-asset-ping-switch',res.data.assetPingSwitch);
 
       post("/sys/user/permissions", {token: res.data.token}).then(res => {
-        store.commit("setMenuList", res.data.menus);
+        let menuList = sortByOrderNum(res.data.menus);
+        store.commit("setMenuList", menuList);
         store.commit("setButtonList", res.data.buttons);
         store.commit("setRoleList", res.data.roles);
 
         bus.$emit("login");
         router.push({
-          path: "/overview",
+          path: menuList.find(menu => menu.route).route,
           query: {
             t: +new Date()
           }