diff --git a/src/components/ListTable/formatters/ShowKeyFormatter.vue b/src/components/ListTable/formatters/ShowKeyFormatter.vue
new file mode 100644
index 000000000..ffd30c3c6
--- /dev/null
+++ b/src/components/ListTable/formatters/ShowKeyFormatter.vue
@@ -0,0 +1,31 @@
+<template>
+  <span v-if="systemuser.length===0"><a style="color: #1c84c6;" @click="showSystemUser">{{ this.$t('common.Show') }}</a></span>
+  <span v-else>{{ this.systemuser.toString() }}</span>
+</template>
+
+<script>
+import BaseFormatter from './base'
+export default {
+  name: 'ShowKeyFormatter',
+  extends: BaseFormatter,
+  data() {
+    return {
+      systemuser: []
+    }
+  },
+  computed: {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    showSystemUser() {
+      this.systemuser.push(this.cellValue)
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>
diff --git a/src/components/ListTable/formatters/index.js b/src/components/ListTable/formatters/index.js
index 9b6922bcf..f365fd2bc 100644
--- a/src/components/ListTable/formatters/index.js
+++ b/src/components/ListTable/formatters/index.js
@@ -13,6 +13,7 @@ import DeleteActionFormatter from './DeleteActionFormatter'
 import DateFormatter from './DateFormatter'
 import ConnectFormatter from './ConnectFormatter'
 import SystemUserFormatter from './SystemUserFormatter'
+import ShowKeyFormatter from '@/components/ListTable/formatters/ShowKeyFormatter'
 
 export default {
   DetailFormatter,
@@ -29,7 +30,8 @@ export default {
   DeleteActionFormatter,
   DateFormatter,
   ConnectFormatter,
-  SystemUserFormatter
+  SystemUserFormatter,
+  ShowKeyFormatter
 }
 
 export {
@@ -47,5 +49,6 @@ export {
   DeleteActionFormatter,
   DateFormatter,
   ConnectFormatter,
-  SystemUserFormatter
+  SystemUserFormatter,
+  ShowKeyFormatter
 }
diff --git a/src/i18n/langs/cn.json b/src/i18n/langs/cn.json
index e333a62e4..57086d4d0 100644
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -87,7 +87,7 @@
     "hostname": "hostname",
     "ip": "IP",
     "last_login": "最后登录日期",
-    "sshkey": ""
+    "sshkey": "sshkey"
   },
   "auth": {
     "LoginRequiredMsg": "账号已退出，请重新登录",
@@ -444,8 +444,12 @@
     "user": "用户"
   },
   "setting": {
+    "Secret": "密钥",
     "Basic": "基本设置",
     "Email": "邮件设置",
+    "Id": "Id",
+    "Create": "创建",
+    "ApiKeyList": "API Key 列表",
     "EmailContent": "邮件内容设置",
     "Hostname": "主机名",
     "Ldap": "LDAP设置",
@@ -476,7 +480,10 @@
     "emailTest": "测试连接",
     "emailUserSSL": "使用SSL",
     "emailUserTLS": "使用TLS",
+    "IsActive": "激活中",
+    "DateCreated": "创建日期",
     "helpText": {
+      "ApiKeyList": "使用api key签名请求头，每个请求的头部是不一样的, 请查阅使用文档",
       "authLdapSearchFilter": "可能的选项是(cn或uid或sAMAccountName=%(user)s)",
       "authLdapSearchOu": "使用|分隔各OU",
       "authLdapUserAttrMap": "用户属性映射代表怎样将LDAP中用户属性映射到jumpserver用户上，username, name,email 是jumpserver的属性",
diff --git a/src/layout/components/NavHeader/AccountDropdown.vue b/src/layout/components/NavHeader/AccountDropdown.vue
index 346b69e27..7e7754e88 100644
--- a/src/layout/components/NavHeader/AccountDropdown.vue
+++ b/src/layout/components/NavHeader/AccountDropdown.vue
@@ -18,18 +18,24 @@
         <el-dropdown-item divided command="logout">{{ $t('common.nav.Logout') }}</el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
+    <ApiKey ref="api" />
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import ApiKey from '@/views/dashboard/ApiKey'
 import { getPermission, setPermission } from '@/utils/auth'
 
 export default {
   name: 'AccountDropdown',
+  components: {
+    ApiKey
+  },
   data() {
     return {
-      avatarUrl: require('@/assets/img/admin.png')
+      avatarUrl: require('@/assets/img/admin.png'),
+      showApiKey: false
     }
   },
   computed: {
@@ -58,6 +64,9 @@ export default {
         case 'logout':
           window.location.href = `/auth/logout/?next=${this.$route.fullPath}`
           break
+        case 'apiKey':
+          this.$refs.api.showApi()
+          break
       }
     }
   }
diff --git a/src/views/dashboard/ApiKey.vue b/src/views/dashboard/ApiKey.vue
new file mode 100644
index 000000000..d5b86990d
--- /dev/null
+++ b/src/views/dashboard/ApiKey.vue
@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <Dialog width="70%" :visible.sync="showDialog" :title="this.$t('setting.ApiKeyList')" :show-cancel="false" :show-confirm="false">
+      <div>
+        <el-alert type="success"> {{ helpMessage }} </el-alert>
+        <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog'
+import ListTable from '@/components/ListTable'
+import { DateFormatter, ShowKeyFormatter } from '@/components/ListTable/formatters'
+export default {
+  name: 'ApiKey',
+  components: {
+    Dialog,
+    ListTable
+  },
+  props: {
+
+  },
+  data() {
+    return {
+      showDialog: false,
+      helpMessage: this.$t('setting.helpText.ApiKeyList'),
+      tableConfig: {
+        url: `/api/v1/authentication/access-keys/`,
+        columns: [
+          'id', 'secret', 'is_active', 'date_created', 'actions'
+        ],
+        hasSelection: false,
+        columnsMeta: {
+          secret: {
+            formatter: ShowKeyFormatter
+          },
+          date_created: {
+            label: this.$t('setting.DateCreated'),
+            formatter: DateFormatter
+          },
+          actions: {
+            onDelete: function({ row, col, cellValue, reload }) {
+              this.$axios.delete(
+                `/api/v1/authentication/access-keys/${row.id}/`
+              ).then(res => {
+                this.$refs.ListTable.reloadTable()
+                this.$message.success(this.$t('common.deleteSuccessMsg'))
+              }).catch(error => {
+                this.$message.error(this.$t('common.deleteErrorMsg' + ' ' + error))
+              })
+            }.bind(this),
+            onUpdate: function({ row, col, cellValue, reload }) {
+              this.$axios.patch(
+                `/api/v1/authentication/access-keys/${row.id}/`,
+                { is_active: !row.is_active }
+              ).then(res => {
+                this.$refs.ListTable.reloadTable()
+                this.$message.success(this.$t('common.updateSuccessMsg'))
+              }).catch(error => {
+                this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
+              })
+            }.bind(this)
+          }
+        }
+
+      },
+      headerActions: {
+        hasRightActions: false,
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: true,
+        hasBulkDelete: false,
+        hasSearch: false,
+        hasCreate: false,
+        extraActions: [
+          {
+            name: this.$t('setting.Create'),
+            title: this.$t('setting.Create'),
+            type: 'primary',
+            can: true,
+            callback: () => {
+              this.$axios.post(
+                `/api/v1/authentication/access-keys/`
+              ).then(res => {
+                this.$refs.ListTable.reloadTable()
+                this.$message.success(this.$t('common.updateSuccessMsg'))
+              }).catch(error => {
+                this.$message.error(this.$t('common.updateErrorMsg' + ' ' + error))
+              }).bind(this)
+            }
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    showApi() {
+      this.showDialog = !this.showDialog
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>