diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
index dd72653b58..6ecce4a9c7 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -13,6 +13,7 @@ import Rename from '../rename';
 import { seafileAPI } from '../../utils/seafile-api';
 import LibHistorySettingDialog from '../dialog/lib-history-setting-dialog';
 import toaster from '../toast';
+import RepoAPITokenDialog from "../dialog/repo-api-token-dialog";
 
 const propTypes = {
   currentGroup: PropTypes.object,
@@ -41,6 +42,7 @@ class SharedRepoListItem extends React.Component {
       isFolderPermissionDialogOpen: false,
       isHistorySettingDialogShow: false,
       isDeleteDialogShow: false,
+      isAPITokenDialogShow: false,
     };
     this.isDeparementOnwerGroupMember = false;
   }
@@ -130,6 +132,9 @@ class SharedRepoListItem extends React.Component {
       case 'History Setting':
         this.onHistorySettingToggle();
         break;
+      case 'API Token':
+        this.onAPITokenToggle();
+        break;
       default:
         break;
     }
@@ -181,6 +186,10 @@ class SharedRepoListItem extends React.Component {
     this.setState({isShowSharedDialog: false});
   }
 
+  onAPITokenToggle = () => {
+    this.setState({isAPITokenDialogShow: !this.state.isAPITokenDialogShow});
+  }
+
   translateMenuItem = (menuItem) => {
     let translateResult = '';
     switch(menuItem) {
@@ -202,6 +211,9 @@ class SharedRepoListItem extends React.Component {
       case 'History Setting':
         translateResult = gettext('History Setting');
         break;
+      case 'API Token':
+        translateResult = gettext('API Token');
+        break;
       default:
         break;
     }
@@ -225,6 +237,7 @@ class SharedRepoListItem extends React.Component {
           } else {
             operations = ['Rename', 'Details'];
           }
+          operations.push('API Token');
         } else {
           operations.push('Unshare');
         }
@@ -430,6 +443,14 @@ class SharedRepoListItem extends React.Component {
             />
           </ModalPortal>
         )}
+        {this.state.isAPITokenDialogShow && (
+          <ModalPortal>
+            <RepoAPITokenDialog
+              repo={repo}
+              onRepoAPITokenToggle={this.onAPITokenToggle}
+            />
+          </ModalPortal>
+        )}
       </Fragment>
     );
   }
diff --git a/seahub/api2/endpoints/repo_api_tokens.py b/seahub/api2/endpoints/repo_api_tokens.py
index 251aabb5d5..4495ae54e7 100644
--- a/seahub/api2/endpoints/repo_api_tokens.py
+++ b/seahub/api2/endpoints/repo_api_tokens.py
@@ -45,7 +45,7 @@ class RepoAPITokensView(APIView):
 
         # permission check
         username = request.user.username
-        if not permission_check_admin_owner(username, repo_id):
+        if not permission_check_admin_owner(username, repo_id, request):
             error_msg = _('Permission denied.')
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -73,7 +73,7 @@ class RepoAPITokensView(APIView):
 
         # permission check
         username = request.user.username
-        if not permission_check_admin_owner(username, repo_id):
+        if not permission_check_admin_owner(username, repo_id, request):
             error_msg = _('Permission denied.')
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -108,7 +108,7 @@ class RepoAPITokenView(APIView):
 
         username = request.user.username
         # permission check
-        if not permission_check_admin_owner(username, repo_id):
+        if not permission_check_admin_owner(username, repo_id, request):
             error_msg = _('Permission denied.')
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -139,7 +139,7 @@ class RepoAPITokenView(APIView):
 
         # permission check
         username = request.user.username
-        if not permission_check_admin_owner(username, repo_id):
+        if not permission_check_admin_owner(username, repo_id, request):
             error_msg = _('Permission denied.')
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
diff --git a/seahub/repo_api_tokens/utils.py b/seahub/repo_api_tokens/utils.py
index cca8d6c556..c6f3b37aeb 100644
--- a/seahub/repo_api_tokens/utils.py
+++ b/seahub/repo_api_tokens/utils.py
@@ -12,14 +12,26 @@ from seahub.settings import ENABLE_VIDEO_THUMBNAIL, THUMBNAIL_ROOT
 from seahub.thumbnail.utils import get_thumbnail_src
 from seahub.utils import is_pro_version, FILEEXT_TYPE_MAP, IMAGE, XMIND, VIDEO
 from seahub.utils.file_tags import get_files_tags_in_dir
+from seahub.utils.repo import is_group_repo_staff
 
 logger = logging.getLogger(__name__)
 json_content_type = 'application/json; charset=utf-8'
 HTTP_520_OPERATION_FAILED = 520
 
 
-def permission_check_admin_owner(username, repo_id):  # maybe add more complex logic in the future
-    return username == seafile_api.get_repo_owner(repo_id)
+def permission_check_admin_owner(username, repo_id, request=None):  # maybe add more complex logic in the future
+    """
+    if repo is owned by user return true
+    or check whether repo is owned by group and whether user is group's staff
+    so finally the code is:
+    check user == repo's owner
+    else
+    check user is the such group's staff
+    """
+    if username == seafile_api.get_repo_owner(repo_id):
+        return True
+    else:
+        return is_group_repo_staff(request, repo_id, username)
 
 
 def get_dir_file_recursively(repo_id, path, all_dirs):