diff --git a/src/router/console/acls.js b/src/router/console/acls.js
index ab4093e77..b7fbcb016 100644
--- a/src/router/console/acls.js
+++ b/src/router/console/acls.js
@@ -218,7 +218,7 @@ export default [
       {
         path: ':id',
         name: 'ConnectMethodAclDetail',
-        component: () => import('@/views/acl/AssetLoginAcl/AssetLoginAclDetail/index'),
+        component: () => import('@/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/index'),
         hidden: true,
         meta: { title: i18n.t('route.AssetAclDetail') }
       },
diff --git a/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue b/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue
new file mode 100644
index 000000000..10f1eade3
--- /dev/null
+++ b/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :md="14" :sm="24">
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import AutoDetailCard from '@/components/DetailCard/auto'
+
+export default {
+  name: 'Detail',
+  components: {
+    AutoDetailCard
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  data() {
+    return {
+      url: `/api/v1/acls/connect-method-acls/${this.object.id}/`,
+      detailFields: [
+        'name',
+        {
+          key: this.$t('acl.action'),
+          value: this.object.action.label
+        },
+        {
+          key: this.$t('acl.reviewer'),
+          value: this.object.reviewers.map(item => item.name).join(', ')
+        },
+        'priority', 'date_created', 'created_by'
+      ]
+    }
+  },
+  computed: {
+  }
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>
diff --git a/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/index.vue b/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/index.vue
new file mode 100644
index 000000000..0c5397478
--- /dev/null
+++ b/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <GenericDetailPage :active-menu.sync="config.activeMenu" :object.sync="TaskDetail" v-bind="config" v-on="$listeners">
+    <keep-alive>
+      <component :is="config.activeMenu" :object="TaskDetail" />
+    </keep-alive>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage } from '@/layout/components'
+import Detail from './Detail.vue'
+import UserJsonTab from '@/components/ManyJsonTabs/UserJsonTab.vue'
+import AssetJsonTab from '@/components/ManyJsonTabs/AssetJsonTab.vue'
+
+export default {
+  components: {
+    GenericDetailPage,
+    Detail,
+    UserJsonTab,
+    AssetJsonTab
+  },
+  data() {
+    return {
+      TaskDetail: {},
+      config: {
+        activeMenu: 'Detail',
+        submenu: [
+          {
+            title: this.$t('acl.RuleDetail'),
+            name: 'Detail'
+          },
+          {
+            title: this.$t('users.Users'),
+            name: 'UserJsonTab'
+          },
+          {
+            title: this.$t('assets.Assets'),
+            name: 'AssetJsonTab'
+          }
+        ],
+        hasRightSide: true,
+        actions: {
+          detailApiUrl: `/api/v1/acls/connect-method-acls/${this.$route.params.id}/`,
+          deleteApiUrl: `/api/v1/acls/connect-method-acls/${this.$route.params.id}/`
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>