diff --git a/src/router/console/acls.js b/src/router/console/acls.js
index a8647bb3e..7a2f478e0 100644
--- a/src/router/console/acls.js
+++ b/src/router/console/acls.js
@@ -34,7 +34,9 @@ export default [
             name: 'UserLoginACLList',
             component: () => import('@/views/acls/UserLoginACL/UserLoginACLList.vue'),
             meta: {
-              title: i18n.t('UserLoginACLs'), menuTitle: i18n.t('UserLogin'), activeMenu: ''
+              title: i18n.t('UserLoginACLs'),
+              menuTitle: i18n.t('UserLogin'),
+              activeMenu: ''
             }
           },
           {
@@ -74,7 +76,7 @@ export default [
         },
         name: 'CmdACL',
         meta: {
-          title: i18n.t('CommandFilterACLs',),
+          title: i18n.t('CommandFilterACLs'),
           menuTitle: i18n.t('CommandFilter'),
           app: 'acls',
           resource: 'commandfilteracl'
@@ -136,7 +138,11 @@ export default [
             path: '',
             name: 'AssetACLList',
             component: () => import('@/views/acls/AssetLoginACL/AssetLoginAclList.vue'),
-            meta: { title: i18n.t('AssetACLs'), activeMenu: '', menuTitle: i18n.t('AssetConnect') }
+            meta: {
+              title: i18n.t('AssetACLs'),
+              activeMenu: '',
+              menuTitle: i18n.t('AssetConnect')
+            }
           },
           {
             path: 'create',
@@ -161,6 +167,53 @@ export default [
           }
         ]
       },
+      {
+        path: 'data-masking-rules',
+        component: empty,
+        redirect: {
+          name: 'DataMaskingRuleList'
+        },
+        name: 'DataMaskingRules',
+        meta: {
+          title: '数据脱敏',
+          licenseRequired: false,
+          app: 'acls',
+          resource: 'datamaskingrule'
+        },
+        children: [
+          {
+            path: '',
+            name: 'DataMaskingRuleList',
+            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleList.vue'),
+            meta: {
+              title: '脱敏规则',
+              activeMenu: '',
+              menuTitle: '数据脱敏'
+            }
+          },
+          {
+            path: 'create',
+            name: 'DataMaskingRuleCreate',
+            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleCreateUpdate.vue'),
+            hidden: true,
+            meta: { title: '创建脱敏规则', activeMenu: '' }
+          },
+          {
+            path: ':id',
+            name: 'AssetACLDetail',
+            component: () => import('@/views/acls/AssetLoginACL/AssetLoginAclDetail/index'),
+            hidden: true,
+            meta: { title: i18n.t('AssetACLDetail'), activeMenu: '' }
+          },
+          {
+            path: ':id/update',
+            name: 'DataMaskingRuleUpdate',
+            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleCreateUpdate.vue'),
+            hidden: true,
+            meta: { title: '修改脱敏规则', activeMenu: '' }
+          }
+        ]
+      },
       {
         path: 'cmd-groups',
         component: empty,
@@ -237,7 +290,11 @@ export default [
             path: '',
             name: 'ConnectMethodACLList',
             component: () => import('@/views/acls/ConnectMethodACL/ConnectMethodAclList.vue'),
-            meta: { title: i18n.t('ConnectMethodACLs'), activeMenu: '', menuTitle: i18n.t('ConnectMethod') }
+            meta: {
+              title: i18n.t('ConnectMethodACLs'),
+              activeMenu: '',
+              menuTitle: i18n.t('ConnectMethod')
+            }
           },
           {
             path: 'create',
diff --git a/src/views/acls/DataMaskingRule/AssetLoginAclDetail/Detail.vue b/src/views/acls/DataMaskingRule/AssetLoginAclDetail/Detail.vue
new file mode 100644
index 000000000..0cd358fea
--- /dev/null
+++ b/src/views/acls/DataMaskingRule/AssetLoginAclDetail/Detail.vue
@@ -0,0 +1,47 @@
+<template>
+  <TwoCol>
+    <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
+  </TwoCol>
+</template>
+
+<script>
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
+import TwoCol from '@/layout/components/Page/TwoColPage.vue'
+
+export default {
+  name: 'Detail',
+  components: {
+    TwoCol,
+    AutoDetailCard
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  data() {
+    return {
+      url: `/api/v1/acls/login-asset-acls/${this.object.id}/`,
+      detailFields: [
+        'name',
+        {
+          key: this.$t('Action'),
+          value: this.object.action.label
+        },
+        {
+          key: this.$t('Reviewer'),
+          value: this.object.reviewers.map(item => item.name).join(', ')
+        },
+        'priority', 'date_created', 'created_by', 'comment'
+      ]
+    }
+  },
+  computed: {}
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>
diff --git a/src/views/acls/DataMaskingRule/AssetLoginAclDetail/index.vue b/src/views/acls/DataMaskingRule/AssetLoginAclDetail/index.vue
new file mode 100644
index 000000000..b8acf81f8
--- /dev/null
+++ b/src/views/acls/DataMaskingRule/AssetLoginAclDetail/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <GenericDetailPage :active-menu.sync="config.activeMenu" :object.sync="instance" v-bind="config" v-on="$listeners">
+    <keep-alive>
+      <component :is="config.activeMenu" :object="instance" />
+    </keep-alive>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage } from '@/layout/components'
+import Detail from './Detail.vue'
+import UserJsonTab from '@/components/Apps/ManyJsonTabs/UserJsonTab.vue'
+import AssetJsonTab from '@/components/Apps/ManyJsonTabs/AssetJsonTab.vue'
+
+export default {
+  components: {
+    GenericDetailPage,
+    Detail,
+    UserJsonTab,
+    AssetJsonTab
+  },
+  data() {
+    return {
+      instance: {},
+      config: {
+        url: `/api/v1/acls/login-asset-acls/`,
+        activeMenu: 'Detail',
+        submenu: [
+          {
+            title: this.$t('Basic'),
+            name: 'Detail'
+          },
+          {
+            title: this.$t('MenuUsers'),
+            name: 'UserJsonTab'
+          },
+          {
+            title: this.$t('Assets'),
+            name: 'AssetJsonTab'
+          }
+        ],
+        hasRightSide: true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/acls/DataMaskingRule/DataMaskingRuleCreateUpdate.vue b/src/views/acls/DataMaskingRule/DataMaskingRuleCreateUpdate.vue
new file mode 100644
index 000000000..7c3fbb2c1
--- /dev/null
+++ b/src/views/acls/DataMaskingRule/DataMaskingRuleCreateUpdate.vue
@@ -0,0 +1,59 @@
+<template>
+  <GenericCreateUpdatePage v-bind="$data" />
+</template>
+
+<script>
+import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
+import { userJSONSelectMeta } from '@/views/users/const'
+import { assetJSONSelectMeta } from '@/views/assets/const'
+import AccountFormatter from '@/views/perms/AssetPermission/components/AccountFormatter.vue'
+
+export default {
+  name: 'DataMaskingRuleCreateUpdate',
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    return {
+      initial: {
+        accounts: ['@ALL']
+      },
+      fields: [
+        [this.$t('Basic'), ['name', 'priority']],
+        [this.$t('Users'), ['users']],
+        [this.$t('Asset'), ['assets']],
+        [this.$t('Accounts'), ['accounts']],
+        [this.$t('Rules'), ['fields_pattern', 'masking_method', 'mask_pattern']],
+        [this.$t('Other'), ['is_active', 'comment']]
+      ],
+      fieldsMeta: {
+        assets: assetJSONSelectMeta(this),
+        users: userJSONSelectMeta(this),
+        accounts: {
+          component: AccountFormatter,
+          el: {
+            showAddTemplate: false,
+            enableVirtualAccount: false,
+            value: ['@ALL'],
+            assets: []
+          },
+          hidden: (formValue) => {
+            const ids = formValue.assets?.ids
+            this.fieldsMeta.accounts.el.assets = ids || []
+          }
+        },
+        mask_pattern: {
+          hidden: (formValue) => {
+            return !['fixed_char'].includes(formValue.masking_method)
+          }
+        }
+      },
+      url: '/api/v1/acls/data-masking-rules/'
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style>
+</style>
diff --git a/src/views/acls/DataMaskingRule/DataMaskingRuleList.vue b/src/views/acls/DataMaskingRule/DataMaskingRuleList.vue
new file mode 100644
index 000000000..a7068f1a2
--- /dev/null
+++ b/src/views/acls/DataMaskingRule/DataMaskingRuleList.vue
@@ -0,0 +1,35 @@
+<template>
+  <GenericListPage :header-actions="headerActions" :help-tip="helpMsg" :table-config="tableConfig" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      helpMsg: this.$t('AssetLoginACLHelpMsg'),
+      tableConfig: {
+        url: '/api/v1/acls/data-masking-rules/',
+        columnsExclude: ['users', 'assets', 'accounts', 'rules'],
+        columnsShow: {
+          min: ['name', 'actions'],
+          default: [
+            'name', 'priority', 'is_active', 'comment', 'actions'
+          ]
+        }
+      },
+      updateRoute: 'DataMaskingRuleUpdate',
+      headerActions: {
+        createRoute: 'DataMaskingRuleCreate',
+        hasRefresh: true,
+        hasExport: false,
+        hasImport: false
+      }
+    }
+  }
+}
+</script>