fix(ui):401 redirect && feat(ui):add auth ldap test (#315)

cmdb-ui/src/api/auth.js

@@ -29,3 +29,12 @@ export function getAuthDataEnable() {
         method: 'get',
     })
 }
+
+
+export function testLDAP(test_type, data) {
+    return axios({
+        url: `/common-setting/v1/auth_config/LDAP/test?test_type=${test_type}`,
+        method: 'post',
+        data,
+    })
+}

cmdb-ui/src/utils/request.js

@@ -5,6 +5,7 @@ import { VueAxios } from './axios'
 import message from 'ant-design-vue/es/message'
 import notification from 'ant-design-vue/es/notification'
 import { ACCESS_TOKEN } from '@/store/global/mutation-types'
+import router from '@/router'
 
 // 创建 axios 实例
 const service = axios.create({
@@ -50,7 +51,7 @@ const err = (error) => {
   }
   if (error.response) {
     console.log(error.config.url)
-    if (error.response.status === 401) {
+    if (error.response.status === 401 && router.path === '/user/login') {
       window.location.href = '/user/logout'
     }
   }

cmdb-ui/src/views/setting/auth/index.vue

@@ -12,13 +12,20 @@
       </span>
       <div class="setting-auth">
         <components :ref="item.value" :is="item.value === 'OIDC' ? 'OAUTH2' : item.value" :data_type="item.value" />
-        <div class="setting-auth-operation">
+        <a-row>
-          <a-space>
+          <a-col :offset="item.value === 'AuthCommonConfig' ? 5 : 3">
-            <a-button :loading="loading" type="primary" @click="handleSave">保存</a-button>
+            <a-space>
-            <a-button :loading="loading" @click="handleReset">重置</a-button>
+              <a-button :loading="loading" type="primary" @click="handleSave">保存</a-button>
-          </a-space>
+              <template v-if="item.value === 'LDAP'">
-        </div>
+                <a-button :loading="loading" ghost type="primary" @click="handleTest('connect')">测试链接</a-button>
+                <a-button :loading="loading" ghost type="primary" @click="handleTest('login')">测试登录</a-button>
+              </template>
+              <a-button :loading="loading" @click="handleReset">重置</a-button>
+            </a-space>
+          </a-col>
+        </a-row>
       </div>
+      <LoginModal v-if="item.value === 'LDAP'" ref="loginModal" @handleOK="(values) => handleTest('login', values)" />
     </a-tab-pane>
   </a-tabs>
 </template>
@@ -29,10 +36,11 @@ import LDAP from './ldap.vue'
 import CAS from './cas.vue'
 import AuthCommonConfig from './common.vue'
 import OAUTH2 from './oauth2.vue'
-import { getAuthData, postAuthData, putAuthData, getAuthDataEnable } from '@/api/auth'
+import LoginModal from './loginModal.vue'
+import { getAuthData, postAuthData, putAuthData, getAuthDataEnable, testLDAP } from '@/api/auth'
 export default {
   name: 'Auth',
-  components: { LDAP, CAS, AuthCommonConfig, OAUTH2 },
+  components: { LDAP, CAS, AuthCommonConfig, OAUTH2, LoginModal },
   data() {
     const authList = [
       {
@@ -76,7 +84,7 @@ export default {
     },
     changeActiveKey() {
       getAuthData(this.activeKey).then((res) => {
-       const _res = _.cloneDeep(res)
+        const _res = _.cloneDeep(res)
         this.$refs[this.activeKey][0].setData(_res?.data ?? null)
         if (_res && JSON.stringify(_res) !== '{}') {
           this.dataTypeId = _res.id
@@ -105,6 +113,29 @@ export default {
     handleReset() {
       this.changeActiveKey()
     },
+    handleTest(type, values = null) {
+      this.$refs[this.activeKey][0].getData(async (data) => {
+        if (type === 'login' && !values) {
+          this.$refs.loginModal[0].open()
+        } else {
+          this.loading = true
+          let _data = _.cloneDeep(data)
+          if (values) {
+            _data = {
+              ..._data,
+              ...values,
+            }
+          }
+          testLDAP(type, { data: _data })
+            .then((res) => {
+              this.$message.success('测试成功')
+            })
+            .finally(() => {
+              this.loading = false
+            })
+        }
+      })
+    },
   },
 }
 </script>
@@ -116,10 +147,6 @@ export default {
   overflow: auto;
   border-radius: 0 5px 5px 5px;
   padding-top: 24px;
-  .setting-auth-operation {
-    padding: 0 100px 24px 100px;
-    text-align: right;
-  }
 }
 </style>
 

cmdb-ui/src/views/setting/auth/loginModal.vue

@@ -0,0 +1,57 @@
+<template>
+    <a-modal :visible="visible" @cancel="handleCancel" @ok="handleOK">
+      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+        <a-form-item label="用户名/邮箱">
+          <a-input
+            v-decorator="[
+              'username',
+              {
+                rules: [{ required: true, message: '请输入用户名或邮箱' }],
+                validateTrigger: 'change',
+              },
+            ]"
+          >
+          </a-input>
+        </a-form-item>
+        <a-form-item label="密码">
+          <a-input
+            type="password"
+            autocomplete="false"
+            v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur' }]"
+          >
+          </a-input>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </template>
+  
+  <script>
+  export default {
+    name: 'LoginModal',
+    data() {
+      return {
+        visible: false,
+        form: this.$form.createForm(this),
+      }
+    },
+    methods: {
+      open() {
+        this.visible = true
+      },
+      handleCancel() {
+        this.visible = false
+      },
+      handleOK() {
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            this.$emit('handleOK', values)
+            this.handleCancel()
+          }
+        })
+      },
+    },
+  }
+  </script>
+  
+  <style></style>
+