diff --git a/web/src/components/Header.js b/web/src/components/Header.js
index 21ebcab6..920a869d 100644
--- a/web/src/components/Header.js
+++ b/web/src/components/Header.js
@@ -5,6 +5,7 @@ import { UserContext } from '../context/User';
 import { Button, Container, Dropdown, Icon, Menu, Segment } from 'semantic-ui-react';
 import { API, getLogo, getSystemName, isAdmin, isMobile, showSuccess } from '../helpers';
 import '../index.css';
+import { renderGroup, renderRole } from '../helpers/render';
 
 // Header Buttons
 let headerButtons = [
@@ -202,7 +203,12 @@ const Header = () => {
                 className='link item'
               >
                 <Dropdown.Menu>
-                  <Dropdown.Item onClick={logout}>注销</Dropdown.Item>
+                  <Dropdown.Item>用户组：{renderGroup(userState.user.group)}</Dropdown.Item>
+                  <Dropdown.Item>角色：{renderRole(userState.user.role)}</Dropdown.Item>
+                  <Dropdown.Item onClick={logout}>
+                    <Icon name='sign-out' />
+                    注销
+                  </Dropdown.Item>
                 </Dropdown.Menu>
               </Dropdown>
             ) : (
diff --git a/web/src/components/UserRole.js b/web/src/components/UserRole.js
new file mode 100644
index 00000000..80f388ae
--- /dev/null
+++ b/web/src/components/UserRole.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Label } from 'semantic-ui-react';
+
+const UserRole = ({ role }) => {
+  switch (role) {
+    case 1:
+      return <Label>普通用户</Label>;
+    case 10:
+      return <Label color='yellow'>管理员</Label>;
+    case 100:
+      return <Label color='orange'>超级管理员</Label>;
+    default:
+      return <Label color='red'>未知身份</Label>;
+  }
+};
+
+export default UserRole;
diff --git a/web/src/components/UsersTable.js b/web/src/components/UsersTable.js
index ad4e9b49..a7654cb0 100644
--- a/web/src/components/UsersTable.js
+++ b/web/src/components/UsersTable.js
@@ -4,20 +4,7 @@ import { Link } from 'react-router-dom';
 import { API, showError, showSuccess } from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
-import { renderGroup, renderNumber, renderQuota, renderText } from '../helpers/render';
-
-function renderRole(role) {
-  switch (role) {
-    case 1:
-      return <Label>普通用户</Label>;
-    case 10:
-      return <Label color='yellow'>管理员</Label>;
-    case 100:
-      return <Label color='orange'>超级管理员</Label>;
-    default:
-      return <Label color='red'>未知身份</Label>;
-  }
-}
+import { renderGroup, renderNumber, renderQuota, renderRole, renderText } from '../helpers/render';
 
 const UsersTable = () => {
   const [users, setUsers] = useState([]);
diff --git a/web/src/helpers/render.js b/web/src/helpers/render.js
index a9c81cc1..301d3236 100644
--- a/web/src/helpers/render.js
+++ b/web/src/helpers/render.js
@@ -7,6 +7,19 @@ export function renderText(text, limit) {
   return text;
 }
 
+export function renderRole(role) {
+  switch (role) {
+    case 1:
+      return <Label>普通用户</Label>;
+    case 10:
+      return <Label color='yellow'>管理员</Label>;
+    case 100:
+      return <Label color='orange'>超级管理员</Label>;
+    default:
+      return <Label color='red'>未知身份</Label>;
+  }
+}
+
 export function renderGroup(group) {
   if (group === '') {
     return <Label>default</Label>;