diff --git a/backend/src/main/resources/db/migration/V16__modify_test_case_path.sql b/backend/src/main/resources/db/migration/V16__modify_test_case_path.sql
new file mode 100644
index 0000000000..a354291d33
--- /dev/null
+++ b/backend/src/main/resources/db/migration/V16__modify_test_case_path.sql
@@ -0,0 +1 @@
+ALTER TABLE test_case MODIFY COLUMN node_path varchar(999) NOT NULL COMMENT 'Node path this case belongs to' ;
diff --git a/frontend/src/business/components/api/test/components/ApiEnvironmentConfig.vue b/frontend/src/business/components/api/test/components/ApiEnvironmentConfig.vue
index f7f84b005c..0918e487cc 100644
--- a/frontend/src/business/components/api/test/components/ApiEnvironmentConfig.vue
+++ b/frontend/src/business/components/api/test/components/ApiEnvironmentConfig.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="$t('api_test.environment.environment_config')" :visible.sync="visible" class="environment-dialog"
+  <el-dialog :close-on-click-modal="false" :title="$t('api_test.environment.environment_config')" :visible.sync="visible" class="environment-dialog"
              @close="close" append-to-body ref="environmentConfig">
     <el-container v-loading="result.loading">
       <ms-aside-item :enable-aside-hidden="false" :title="$t('api_test.environment.environment_list')" :data="environments" :item-operators="environmentOperators" :add-fuc="addEnvironment"
diff --git a/frontend/src/business/components/api/test/components/import/ApiImport.vue b/frontend/src/business/components/api/test/components/import/ApiImport.vue
index 7881ee7b8e..7d695d4f56 100644
--- a/frontend/src/business/components/api/test/components/import/ApiImport.vue
+++ b/frontend/src/business/components/api/test/components/import/ApiImport.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="$t('api_test.api_import.title')" :visible.sync="visible" class="api-import" v-loading="result.loading" @close="close">
+  <el-dialog :close-on-click-modal="false" :title="$t('api_test.api_import.title')" :visible.sync="visible" class="api-import" v-loading="result.loading" @close="close">
 
     <div class="header-bar">
       <div>{{$t('api_test.api_import.data_format')}}</div>
diff --git a/frontend/src/business/components/common/components/MsDeleteConfirm.vue b/frontend/src/business/components/common/components/MsDeleteConfirm.vue
index 1d7185e32b..3bc4874816 100644
--- a/frontend/src/business/components/common/components/MsDeleteConfirm.vue
+++ b/frontend/src/business/components/common/components/MsDeleteConfirm.vue
@@ -1,5 +1,6 @@
 <template>
-  <el-dialog :title="title"
+  <el-dialog :close-on-click-modal="false"
+             :title="title"
              :visible.sync="dialogVisible"
              class="delete-confirm" >
 
diff --git a/frontend/src/business/components/common/components/MsScheduleEdit.vue b/frontend/src/business/components/common/components/MsScheduleEdit.vue
index c75224158b..aecd9669b1 100644
--- a/frontend/src/business/components/common/components/MsScheduleEdit.vue
+++ b/frontend/src/business/components/common/components/MsScheduleEdit.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog width="35%" class="schedule-edit" :title="$t('schedule.edit_timer_task')" :visible.sync="dialogVisible"  @close="close">
+  <el-dialog :close-on-click-modal="false" width="35%" class="schedule-edit" :title="$t('schedule.edit_timer_task')" :visible.sync="dialogVisible"  @close="close">
     <div id="app">
       <el-form :model="form" :rules="rules" ref="from">
         <el-form-item
diff --git a/frontend/src/business/components/project/MsProject.vue b/frontend/src/business/components/project/MsProject.vue
index c8bc31b833..911a9e16ad 100644
--- a/frontend/src/business/components/project/MsProject.vue
+++ b/frontend/src/business/components/project/MsProject.vue
@@ -49,7 +49,7 @@
       </el-card>
     </ms-main-container>
 
-    <el-dialog :title="title" :visible.sync="createVisible" destroy-on-close @close="handleClose">
+    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="createVisible" destroy-on-close @close="handleClose">
       <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px" size="small">
         <el-form-item :label="$t('commons.name')" prop="name">
           <el-input v-model="form.name" autocomplete="off"></el-input>
diff --git a/frontend/src/business/components/settings/organization/OrganizationMember.vue b/frontend/src/business/components/settings/organization/OrganizationMember.vue
index 0f22f54054..1d8c718001 100644
--- a/frontend/src/business/components/settings/organization/OrganizationMember.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationMember.vue
@@ -25,7 +25,7 @@
                            :total="total"/>
     </el-card>
 
-    <el-dialog :title="$t('member.create')" :visible.sync="createVisible" width="30%" :destroy-on-close="true"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="createVisible" width="30%" :destroy-on-close="true"
                @close="handleClose">
       <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="100px" size="small">
         <el-form-item :label="$t('commons.member')" prop="ids"
@@ -73,7 +73,7 @@
       </template>
     </el-dialog>
 
-    <el-dialog :title="$t('member.modify')" :visible.sync="updateVisible" width="30%" :destroy-on-close="true"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.modify')" :visible.sync="updateVisible" width="30%" :destroy-on-close="true"
                @close="handleClose">
       <el-form :model="form" label-position="right" label-width="100px" size="small" ref="updateUserForm">
         <el-form-item label="ID" prop="id">
diff --git a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
index 964f4d41b9..79abac6e22 100644
--- a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
@@ -24,7 +24,7 @@
                            :total="total"/>
     </el-card>
 
-    <el-dialog :title="$t('workspace.create')" :visible.sync="dialogWsAddVisible" width="30%" @close="close">
+    <el-dialog :close-on-click-modal="false" :title="$t('workspace.create')" :visible.sync="dialogWsAddVisible" width="30%" @close="close">
       <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px" size="small">
         <el-form-item :label="$t('commons.name')" prop="name">
           <el-input v-model="form.name" autocomplete="off"/>
@@ -39,7 +39,7 @@
           @confirm="submit('form')"/>
       </template>
     </el-dialog>
-    <el-dialog :title="$t('workspace.update')" :visible.sync="dialogWsUpdateVisible" width="30%">
+    <el-dialog :close-on-click-modal="false" :title="$t('workspace.update')" :visible.sync="dialogWsUpdateVisible" width="30%">
       <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px" size="small">
         <el-form-item :label="$t('commons.name')" prop="name">
           <el-input v-model="form.name" autocomplete="off"/>
@@ -56,7 +56,7 @@
     </el-dialog>
 
     <!-- dialog of workspace member -->
-    <el-dialog :visible.sync="dialogWsMemberVisible" width="70%" :destroy-on-close="true" @close="close"
+    <el-dialog :close-on-click-modal="false" :visible.sync="dialogWsMemberVisible" width="70%" :destroy-on-close="true" @close="close"
                class="dialog-css">
       <ms-table-header :condition.sync="dialogCondition" @create="addMember" @search="dialogSearch"
                        :create-tip="$t('member.create')" :title="$t('commons.member')"/>
@@ -82,7 +82,7 @@
     </el-dialog>
 
     <!-- add workspace member dialog -->
-    <el-dialog :title="$t('member.create')" :visible.sync="dialogWsMemberAddVisible" width="30%"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="dialogWsMemberAddVisible" width="30%"
                :destroy-on-close="true"
                @close="closeFunc">
       <el-form :model="memberForm" ref="form" :rules="wsMemberRule" label-position="right" label-width="100px"
@@ -125,7 +125,7 @@
     </el-dialog>
 
     <!-- update workspace member dialog -->
-    <el-dialog :title="$t('member.modify')" :visible.sync="dialogWsMemberUpdateVisible" width="30%"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.modify')" :visible.sync="dialogWsMemberUpdateVisible" width="30%"
                :destroy-on-close="true"
                @close="closeFunc">
       <el-form :model="memberForm" label-position="right" label-width="100px" size="small" ref="updateUserForm">
diff --git a/frontend/src/business/components/settings/personal/PersonSetting.vue b/frontend/src/business/components/settings/personal/PersonSetting.vue
index dfc56780d0..bff2281cf7 100644
--- a/frontend/src/business/components/settings/personal/PersonSetting.vue
+++ b/frontend/src/business/components/settings/personal/PersonSetting.vue
@@ -32,7 +32,7 @@
     </el-card>
 
     <!--Modify personal details-->
-    <el-dialog :title="$t('member.modify_personal_info')" :visible.sync="updateVisible" width="30%"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.modify_personal_info')" :visible.sync="updateVisible" width="30%"
                :destroy-on-close="true" @close="handleClose">
       <el-form :model="form" label-position="right" label-width="100px" size="small" :rules="rule"
                ref="updateUserForm">
@@ -57,7 +57,7 @@
     </el-dialog>
 
     <!--Change personal password-->
-    <el-dialog :title="$t('member.edit_password')" :visible.sync="editPasswordVisible" width="35%"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.edit_password')" :visible.sync="editPasswordVisible" width="35%"
                :destroy-on-close="true" @close="handleClose" left>
       <el-form :model="ruleForm" :rules="rules" ref="editPasswordForm" label-width="120px" class="demo-ruleForm">
         <el-form-item :label="$t('member.old_password')" prop="password" style="margin-bottom: 29px">
diff --git a/frontend/src/business/components/settings/system/Organization.vue b/frontend/src/business/components/settings/system/Organization.vue
index 29cf3e4ee0..ab8cfc75c5 100644
--- a/frontend/src/business/components/settings/system/Organization.vue
+++ b/frontend/src/business/components/settings/system/Organization.vue
@@ -28,7 +28,7 @@
     </el-card>
 
     <!-- dialog of organization member -->
-    <el-dialog :visible.sync="dialogOrgMemberVisible" width="70%" :destroy-on-close="true" @close="closeFunc"
+    <el-dialog :close-on-click-modal="false" :visible.sync="dialogOrgMemberVisible" width="70%" :destroy-on-close="true" @close="closeFunc"
                class="dialog-css">
       <ms-table-header :condition.sync="dialogCondition" @create="addMember" @search="dialogSearch"
                        :create-tip="$t('member.create')" :title="$t('commons.member')"/>
@@ -56,7 +56,7 @@
     </el-dialog>
 
     <!-- add organization form -->
-    <el-dialog :title="$t('organization.create')" :visible.sync="dialogOrgAddVisible" width="30%" @closed="closeFunc"
+    <el-dialog :close-on-click-modal="false" :title="$t('organization.create')" :visible.sync="dialogOrgAddVisible" width="30%" @closed="closeFunc"
                :destroy-on-close="true">
       <el-form :model="form" label-position="right" label-width="100px" size="small" :rules="rule"
                ref="createOrganization">
@@ -75,7 +75,7 @@
     </el-dialog>
 
     <!-- update organization form -->
-    <el-dialog :title="$t('organization.modify')" :visible.sync="dialogOrgUpdateVisible" width="30%"
+    <el-dialog :close-on-click-modal="false" :title="$t('organization.modify')" :visible.sync="dialogOrgUpdateVisible" width="30%"
                :destroy-on-close="true"
                @close="closeFunc">
       <el-form :model="form" label-position="right" label-width="100px" size="small" :rules="rule"
@@ -95,7 +95,7 @@
     </el-dialog>
 
     <!-- add organization member form -->
-    <el-dialog :title="$t('member.create')" :visible.sync="dialogOrgMemberAddVisible" width="30%"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="dialogOrgMemberAddVisible" width="30%"
                :destroy-on-close="true"
                @close="closeFunc">
       <el-form :model="memberForm" ref="form" :rules="orgMemberRule" label-position="right" label-width="100px"
@@ -133,7 +133,7 @@
     </el-dialog>
 
     <!-- update organization member form -->
-    <el-dialog :title="$t('member.modify')" :visible.sync="dialogOrgMemberUpdateVisible" width="30%"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.modify')" :visible.sync="dialogOrgMemberUpdateVisible" width="30%"
                :destroy-on-close="true"
                @close="closeFunc">
       <el-form :model="memberForm" label-position="right" label-width="100px" size="small" ref="updateUserForm">
diff --git a/frontend/src/business/components/settings/system/SystemWorkspace.vue b/frontend/src/business/components/settings/system/SystemWorkspace.vue
index 099c8d4a59..ffac20b2f9 100644
--- a/frontend/src/business/components/settings/system/SystemWorkspace.vue
+++ b/frontend/src/business/components/settings/system/SystemWorkspace.vue
@@ -28,7 +28,7 @@
     </el-card>
 
     <!-- add workspace dialog -->
-    <el-dialog :title="$t('workspace.create')" :visible.sync="dialogWsAddVisible" width="30%" @close="close">
+    <el-dialog :close-on-click-modal="false" :title="$t('workspace.create')" :visible.sync="dialogWsAddVisible" width="30%" @close="close">
       <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px" size="small">
         <el-form-item :label="$t('commons.name')" prop="name">
           <el-input v-model="form.name" autocomplete="off"/>
@@ -56,7 +56,7 @@
     </el-dialog>
 
     <!-- update workspace dialog -->
-    <el-dialog :title="$t('workspace.update')" :visible.sync="dialogWsUpdateVisible" width="30%" @close="close">
+    <el-dialog :close-on-click-modal="false" :title="$t('workspace.update')" :visible.sync="dialogWsUpdateVisible" width="30%" @close="close">
       <el-form :model="form" :rules="rules" ref="updateForm" label-position="right" label-width="100px" size="small">
         <el-form-item :label="$t('commons.name')" prop="name">
           <el-input v-model="form.name" autocomplete="off"/>
@@ -85,7 +85,7 @@
     </el-dialog>
 
     <!-- dialog of workspace member -->
-    <el-dialog :visible.sync="dialogWsMemberVisible" width="70%" :destroy-on-close="true" @close="closeWsMemberDialog" class="dialog-css">
+    <el-dialog :close-on-click-modal="false" :visible.sync="dialogWsMemberVisible" width="70%" :destroy-on-close="true" @close="closeWsMemberDialog" class="dialog-css">
       <ms-table-header :condition.sync="dialogCondition" @create="addMember" @search="dialogSearch"
                        :create-tip="$t('member.create')" :title="$t('commons.member')"/>
       <!-- organization member table -->
@@ -111,7 +111,7 @@
     </el-dialog>
 
     <!-- add workspace member dialog -->
-    <el-dialog :title="$t('member.create')" :visible.sync="dialogWsMemberAddVisible" width="30%"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="dialogWsMemberAddVisible" width="30%"
                :destroy-on-close="true"
                @close="handleClose">
       <el-form :model="memberForm" ref="form" :rules="wsMemberRule" label-position="right" label-width="100px"
@@ -149,7 +149,7 @@
     </el-dialog>
 
     <!-- update workspace member dialog -->
-    <el-dialog :title="$t('member.modify')" :visible.sync="dialogWsMemberUpdateVisible" width="30%"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.modify')" :visible.sync="dialogWsMemberUpdateVisible" width="30%"
                :destroy-on-close="true"
                @close="handleClose">
       <el-form :model="memberForm" label-position="right" label-width="100px" size="small" ref="updateUserForm">
diff --git a/frontend/src/business/components/settings/system/TestResourcePool.vue b/frontend/src/business/components/settings/system/TestResourcePool.vue
index 90daac46c3..f1a20228c0 100644
--- a/frontend/src/business/components/settings/system/TestResourcePool.vue
+++ b/frontend/src/business/components/settings/system/TestResourcePool.vue
@@ -45,6 +45,7 @@
     </el-card>
 
     <el-dialog
+      :close-on-click-modal="false"
       :title="$t('test_resource_pool.create_resource_pool')"
       :visible.sync="createVisible" width="70%"
       @closed="closeFunc"
@@ -109,6 +110,7 @@
     </el-dialog>
 
     <el-dialog
+      :close-on-click-modal="false"
       v-loading="result.loading"
       :title="$t('test_resource_pool.update_resource_pool')" :visible.sync="updateVisible" width="70%"
       :destroy-on-close="true"
diff --git a/frontend/src/business/components/settings/system/User.vue b/frontend/src/business/components/settings/system/User.vue
index 14dd1aeb3d..02ea001e4f 100644
--- a/frontend/src/business/components/settings/system/User.vue
+++ b/frontend/src/business/components/settings/system/User.vue
@@ -50,7 +50,7 @@
     </el-card>
 
     <!--Create user-->
-    <el-dialog :title="$t('user.create')" :visible.sync="createVisible" width="35%" @closed="handleClose"
+    <el-dialog :close-on-click-modal="false" :title="$t('user.create')" :visible.sync="createVisible" width="35%" @closed="handleClose"
                :destroy-on-close="true">
       <el-form :model="form" label-position="right" label-width="120px" size="small" :rules="rule" ref="createUserForm">
         <el-form-item label="ID" prop="id">
@@ -163,7 +163,7 @@
     </el-dialog>
 
     <!--Modify user information in system settings-->
-    <el-dialog :title="$t('user.modify')" :visible.sync="updateVisible" width="35%" :destroy-on-close="true"
+    <el-dialog :close-on-click-modal="false" :title="$t('user.modify')" :visible.sync="updateVisible" width="35%" :destroy-on-close="true"
                @close="handleClose" v-loading="result.loading">
       <el-form :model="form" label-position="right" label-width="120px" size="small" :rules="rule" ref="updateUserForm">
         <el-form-item label="ID" prop="id">
@@ -268,7 +268,7 @@
       </template>
     </el-dialog>
     <!--Changing user password in system settings-->
-    <el-dialog :title="$t('member.edit_password')" :visible.sync="editPasswordVisible" width="30%"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.edit_password')" :visible.sync="editPasswordVisible" width="30%"
                :destroy-on-close="true" @close="handleClose" left>
       <el-form :model="ruleForm" label-position="right" label-width="120px" size="small" :rules="rule"
                ref="editPasswordForm" class="demo-ruleForm">
diff --git a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
index ce1a365fa0..db56275b42 100644
--- a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
+++ b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
@@ -26,7 +26,7 @@
                            :total="total"/>
     </el-card>
 
-    <el-dialog :title="$t('member.create')" :visible.sync="createVisible" width="30%" :destroy-on-close="true"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.create')" :visible.sync="createVisible" width="30%" :destroy-on-close="true"
                @close="handleClose">
       <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="100px" size="small">
         <el-form-item :label="$t('commons.member')" prop="memberSign" :rules="{required: true, message: $t('member.input_id_or_email'), trigger: 'change'}">
@@ -65,7 +65,7 @@
       </template>
     </el-dialog>
 
-    <el-dialog :title="$t('member.modify')" :visible.sync="updateVisible" width="30%" :destroy-on-close="true"
+    <el-dialog :close-on-click-modal="false" :title="$t('member.modify')" :visible.sync="updateVisible" width="30%" :destroy-on-close="true"
                @close="handleClose">
       <el-form :model="form" label-position="right" label-width="100px" size="small" ref="updateUserForm">
         <el-form-item label="ID" prop="id">
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index 6558a677c3..d5a9c8b65e 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -2,7 +2,8 @@
 
   <div>
 
-    <el-dialog @close="close"
+    <el-dialog :close-on-click-modal="false"
+               @close="close"
                :title="operationType == 'edit' ? ( readOnly ? $t('test_track.case.view_case') : $t('test_track.case.edit_case')) : $t('test_track.case.create')"
                :visible.sync="dialogFormVisible" width="65%" :close-on-click-modal="false">
 
diff --git a/frontend/src/business/components/track/plan/components/TestPlanEdit.vue b/frontend/src/business/components/track/plan/components/TestPlanEdit.vue
index b51d0de096..a8a5cf7450 100644
--- a/frontend/src/business/components/track/plan/components/TestPlanEdit.vue
+++ b/frontend/src/business/components/track/plan/components/TestPlanEdit.vue
@@ -2,7 +2,8 @@
 
   <div>
 
-    <el-dialog :title="operationType == 'edit' ? $t('test_track.plan.edit_plan') : $t('test_track.plan.create_plan')"
+    <el-dialog :close-on-click-modal="false"
+               :title="operationType == 'edit' ? $t('test_track.plan.edit_plan') : $t('test_track.plan.create_plan')"
                :visible.sync="dialogFormVisible"
                @close="close"
                width="65%">
diff --git a/frontend/src/business/permission.js b/frontend/src/business/permission.js
index 62ec88a8a9..fd8e8ddce2 100644
--- a/frontend/src/business/permission.js
+++ b/frontend/src/business/permission.js
@@ -1,6 +1,6 @@
 import router from './components/common/router/router'
-import {TokenKey} from '../common/js/constants';
-import {hasRolePermissions, hasRoles} from "../common/js/utils";
+import {TokenKey} from '@/common/js/constants';
+import {hasRolePermissions, hasRoles} from "@/common/js/utils";
 
 const whiteList = ['/login']; // no redirect whitelist
 
@@ -17,22 +17,18 @@ export const roles = {
 };
 
 function checkRolePermission(el, binding, type) {
-  const { value } = binding;
-  const rolesString = localStorage.getItem("roles");
-  const roles = rolesString.split(',');
+  const {value} = binding;
   if (value && value instanceof Array && value.length > 0) {
     const permissionRoles = value;
     let hasPermission = false;
     if (type === 'roles') {
-      hasPermission  = hasRoles(...permissionRoles);
+      hasPermission = hasRoles(...permissionRoles);
     } else if (type === 'permission') {
       hasPermission = hasRolePermissions(...permissionRoles);
     }
     if (!hasPermission) {
       el.parentNode && el.parentNode.removeChild(el)
     }
-  } else {
-    // throw new Error(`need roles! Like v-permission="['admin','editor']"`)
   }
 }