feat(ui):auth setting (#310)

cmdb-ui/src/api/auth.js

@@ -0,0 +1,31 @@
+import { axios } from '@/utils/request'
+
+export function getAuthData(data_type) {
+    return axios({
+        url: `/common-setting/v1/auth_config/${data_type}`,
+        method: 'get',
+    })
+}
+
+export function postAuthData(data_type, data) {
+    return axios({
+        url: `/common-setting/v1/auth_config/${data_type}`,
+        method: 'post',
+        data,
+    })
+}
+
+export function putAuthData(data_type, id, data) {
+    return axios({
+        url: `/common-setting/v1/auth_config/${data_type}/${id}`,
+        method: 'put',
+        data,
+    })
+}
+
+export function getAuthDataEnable() {
+    return axios({
+        url: `/common-setting/v1/auth_config/enable_list`,
+        method: 'get',
+    })
+}

cmdb-ui/src/api/index.js

@@ -1,8 +1,6 @@
-import config from '@/config/setting'
-
 const api = {
-  Login: config.useSSO ? '/api/sso/login' : '/v1/acl/login',
-  Logout: config.useSSO ? '/api/sso/logout' : '/v1/acl/logout',
+  Login: '/v1/acl/login',
+  Logout: '/v1/acl/logout',
   ForgePassword: '/auth/forge-password',
   Register: '/auth/register',
   twoStepCode: '/auth/2step-code',

cmdb-ui/src/api/login.js

@@ -1,6 +1,5 @@
 import api from './index'
 import { axios } from '@/utils/request'
-import config from '@/config/setting'
 /**
  * login func
  * parameter: {
@@ -12,9 +11,10 @@ import config from '@/config/setting'
  * @param parameter
  * @returns {*}
  */
-export function login(data) {
-  if (config.useSSO) {
-    window.location.href = config.ssoLoginUrl
+export function login(data, auth_type) {
+  if (auth_type) {
+    localStorage.setItem('ops_auth_type', auth_type)
+    window.location.href = `/api/${auth_type.toLowerCase()}/login`
   } else {
     return axios({
       url: api.Login,
@@ -43,17 +43,15 @@ export function getInfo() {
 }
 
 export function logout() {
-  if (config.useSSO) {
-    window.location.replace(api.Logout)
-  } else {
-    return axios({
-      url: api.Logout,
-      method: 'post',
-      headers: {
-        'Content-Type': 'application/json;charset=UTF-8'
-      }
-    })
-  }
+  const auth_type = localStorage.getItem('ops_auth_type')
+  localStorage.clear()
+  return axios({
+    url: auth_type ? `/${auth_type.toLowerCase()}/logout` : api.Logout,
+    method: auth_type ? 'get' : 'post',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
 }
 
 /**

cmdb-ui/src/components/tools/UserMenu.vue

@@ -66,10 +66,8 @@ export default {
 
       this.$confirm({
         title: '提示',
-        content: '真的要注销登录吗 ?',
+        content: '确认注销登录 ?',
         onOk() {
-          // localStorage.removeItem('ops_cityps_currentId')
-          localStorage.clear()
           return that.Logout()
         },
         onCancel() {},

cmdb-ui/src/config/app.js

@@ -2,7 +2,6 @@ const appConfig = {
   buildModules: ['cmdb', 'acl'], // 需要编译的模块
   redirectTo: '/cmdb', // 首页的重定向路径
   buildAclToModules: true, // 是否在各个应用下 内联权限管理
-  ssoLogoutURL: '/api/sso/logout',
   showDocs: false,
   useEncryption: false,
 }

cmdb-ui/src/config/setting.js

@@ -1,6 +1,5 @@
 /**
  * 项目默认配置项
- * useSSO - 是否启用单点登录, 默认为否, 可以根据需要接入到公司的单点登录系统
  * primaryColor - 默认主题色, 如果修改颜色不生效，请清理 localStorage
  * navTheme - sidebar theme ['dark', 'light'] 两种主题
  * colorWeak - 色盲模式
@@ -15,8 +14,6 @@
  */
 
 export default {
-  useSSO: false,
-  ssoLoginUrl: '/api/sso/login',
   primaryColor: '#1890ff', // primary color of ant design
   navTheme: 'dark', // theme for nav menu
   layout: 'sidemenu', // nav menu position: sidemenu or topmenu

cmdb-ui/src/guard.js

@@ -6,7 +6,6 @@ import store from './store'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import { setDocumentTitle, domTitle } from '@/utils/domUtil'
-import config from '@/config/setting'
 import { ACCESS_TOKEN } from './store/global/mutation-types'
 
 NProgress.configure({ showSpinner: false })
@@ -16,16 +15,16 @@ const whitePath = ['/user/login', '/user/logout', '/user/register', '/api/sso/lo
 
 // 此处不处理登录, 只处理 是否有用户信息的认证  前端permission的处理  axios处理401 ->  登录
 //  登录页面处理处理 是否使用单点登录
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   NProgress.start() // start progress bar
   to.meta && (!!to.meta.title && setDocumentTitle(`${to.meta.title} - ${domTitle}`))
 
   const authed = store.state.authed
-
-
+  const auth_type = localStorage.getItem('ops_auth_type')
   if (whitePath.includes(to.path)) {
     next()
-  } else if ((config.useSSO || (!config.useSSO && Vue.ls.get(ACCESS_TOKEN))) && store.getters.roles.length === 0) {
+  } else if ((auth_type || (!auth_type && Vue.ls.get(ACCESS_TOKEN))) && store.getters.roles.length === 0) {
+    store.dispatch('GetAuthDataEnable')
     store.dispatch('GetInfo').then(res => {
       const roles = res.result && res.result.role
       store.dispatch("loadAllUsers")
@@ -46,10 +45,17 @@ router.beforeEach((to, from, next) => {
     }).catch((e) => {
       setTimeout(() => { store.dispatch('Logout') }, 3000)
     })
-  } else if (to.path === '/user/login' && !config.useSSO && store.getters.roles.length !== 0) {
+  } else if (to.path === '/user/login' && !auth_type && store.getters.roles.length !== 0) {
     next({ path: '/' })
-  } else if (!config.useSSO && !Vue.ls.get(ACCESS_TOKEN) && to.path !== '/user/login') {
-    next({ path: '/user/login', query: { redirect: to.fullPath } })
+  } else if (!auth_type && !Vue.ls.get(ACCESS_TOKEN) && to.path !== '/user/login') {
+    await store.dispatch('GetAuthDataEnable')
+    const { enable_list = [] } = store?.state?.user?.auth_enable ?? {}
+    const _enable_list = enable_list.filter(en => en.auth_type !== 'LDAP')
+    if (_enable_list.length === 1) {
+      next({ path: '/user/logout', query: { redirect: to.fullPath } })
+    } else {
+      next({ path: '/user/login', query: { redirect: to.fullPath } })
+    }
   } else {
     next()
   }

cmdb-ui/src/modules/acl/views/users.vue

@@ -133,8 +133,8 @@ export default {
         if (newVal) {
           this.tableData = this.allUsers.filter(
             (item) =>
-              item.username.toLowerCase().includes(newVal.toLowerCase()) ||
-              item.nickname.toLowerCase().includes(newVal.toLowerCase())
+              (item.username && item.username.toLowerCase().includes(newVal.toLowerCase())) ||
+              (item.nickname && item.nickname.toLowerCase().includes(newVal.toLowerCase()))
           )
         } else {
           this.tableData = this.allUsers

cmdb-ui/src/router/config.js

@@ -92,7 +92,13 @@ export const generatorDynamicRouter = async () => {
             meta: { title: '飞书', icon: 'ops-setting-notice-feishu', selectedIcon: 'ops-setting-notice-feishu-selected' },
             component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/notice/feishu')
           }]
-        }
+        },
+        {
+          path: '/setting/auth',
+          name: 'company_auth',
+          meta: { title: '认证设置', appName: 'backend', icon: 'ops-setting-auth', selectedIcon: 'ops-setting-auth-selected', permission: ['acl_admin'] },
+          component: () => import(/* webpackChunkName: "setting" */ '@/views/setting/auth/index')
+        },
       ]
     },])
   return routes
@@ -112,6 +118,11 @@ export const constantRouterMap = [
     name: 'login',
     component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login'),
   },
+  {
+    path: '/user/logout',
+    name: 'logout',
+    component: () => import(/* webpackChunkName: "user" */ '@/views/user/Logout'),
+  },
   {
     path: '/user',
     component: UserLayout,

cmdb-ui/src/store/global/user.js

@@ -6,6 +6,7 @@ import { getAllUsers } from '../../api/login'
 import { searchPermResourceByRoleId } from '@/modules/acl/api/permission'
 import { getEmployeeByUid, getEmployeeList } from '@/api/employee'
 import { getAllDepartmentList } from '@/api/company'
+import { getAuthDataEnable } from '@/api/auth'
 
 const user = {
   state: {
@@ -44,7 +45,8 @@ const user = {
     nickname: '',
     sex: '',
     position_name: '',
-    direct_supervisor_id: null
+    direct_supervisor_id: null,
+    auth_enable: {}
   },
 
   mutations: {
@@ -87,13 +89,27 @@ const user = {
         ...data
       } : state.detailPermissions
     },
+    SET_AUTH_ENABLE: (state, data) => {
+      state.auth_enable = data
+    }
   },
 
   actions: {
-    // 登录
-    Login({ commit }, userInfo) {
+     // 获取enable_list
+     GetAuthDataEnable({ commit }, userInfo) {
       return new Promise((resolve, reject) => {
-        login(userInfo).then(response => {
+        getAuthDataEnable().then(res => {
+          commit('SET_AUTH_ENABLE', res)
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    // 登录
+    Login({ commit }, { userInfo, auth_type = undefined }) {
+      return new Promise((resolve, reject) => {
+        login(userInfo, auth_type).then(response => {
           Vue.ls.set(ACCESS_TOKEN, response.token, 7 * 24 * 60 * 60 * 1000)
           commit('SET_TOKEN', response.token)
           resolve()
@@ -159,10 +175,11 @@ const user = {
         Vue.ls.remove(ACCESS_TOKEN)
 
         logout(state.token).then(() => {
-          window.location.reload()
           resolve()
         }).catch(() => {
           resolve()
+        }).finally(() => {
+          window.location.href = '/user/logout'
         })
       })
     },

cmdb-ui/src/store/index.js

@@ -9,7 +9,6 @@ import logo from './global/logo'
 import notice from './global/notice'
 import getters from './global/getters'
 import appConfig from '@/config/app'
-console.log(appConfig)
 
 Vue.use(Vuex)
 

cmdb-ui/src/utils/request.js

@@ -1,9 +1,7 @@
 /* eslint-dsiable */
 import Vue from 'vue'
 import axios from 'axios'
-import store from '@/store'
 import { VueAxios } from './axios'
-import config from '@/config/setting'
 import message from 'ant-design-vue/es/message'
 import notification from 'ant-design-vue/es/notification'
 import { ACCESS_TOKEN } from '@/store/global/mutation-types'
@@ -52,8 +50,8 @@ const err = (error) => {
   }
   if (error.response) {
     console.log(error.config.url)
-    if (error.response.status === 401 && config.useSSO) {
-      store.dispatch('Login')
+    if (error.response.status === 401) {
+      window.location.href = '/user/logout'
     }
   }
   return Promise.reject(error)

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

@@ -0,0 +1,111 @@
+<template>
+  <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
+    <SpanTitle>基本</SpanTitle>
+    <a-form-model-item label="是否启用" prop="enable">
+      <a-switch
+        :checked="Boolean(form.enable)"
+        @change="
+          () => {
+            $set(form, 'enable', Number(!form.enable))
+          }
+        "
+      />
+    </a-form-model-item>
+    <a-form-model-item label="服务端地址" prop="cas_server" help="不包括url path，例如https://xxx.com">
+      <a-input v-model="form.cas_server" placeholder="请输入服务端地址" />
+    </a-form-model-item>
+    <a-form-model-item label="验证服务端地址" prop="cas_validate_server" help="不包括url path，例如https://xxx.com">
+      <a-input v-model="form.cas_validate_server" placeholder="请输入验证服务端地址" />
+    </a-form-model-item>
+    <SpanTitle>其他</SpanTitle>
+    <a-form-model-item label="登录路由" prop="cas_login_route">
+      <a-input v-model="form.cas_login_route" placeholder="/cas/built-in/cas/login" />
+    </a-form-model-item>
+    <a-form-model-item label="注销路由" prop="cas_logout_route">
+      <a-input v-model="form.cas_logout_route" placeholder="/cas/built-in/cas/logout" />
+    </a-form-model-item>
+    <a-form-model-item label="验证路由" prop="cas_validate_route">
+      <a-input v-model="form.cas_validate_route" placeholder="/cas/built-in/cas/serviceValidate" />
+    </a-form-model-item>
+    <a-form-model-item label="重定向路由" prop="cas_after_login">
+      <a-input v-model="form.cas_after_login" placeholder="请输入重定向路由" />
+    </a-form-model-item>
+    <a-form-model-item label="用户属性映射" prop="cas_user_map" :wrapper-col="{ span: 15 }">
+      <vue-json-editor
+        :style="{ '--custom-height': `${200}px` }"
+        v-model="form.cas_user_map"
+        :showBtns="false"
+        mode="code"
+        lang="zh"
+        @json-change="onJsonChange"
+        @has-error="onJsonError"
+      />
+    </a-form-model-item>
+  </a-form-model>
+</template>
+
+<script>
+import _ from 'lodash'
+import vueJsonEditor from 'vue-json-editor'
+import SpanTitle from '../components/spanTitle.vue'
+export default {
+  name: 'CAS',
+  components: { SpanTitle, vueJsonEditor },
+  data() {
+    const defaultForm = {
+      enable: 0,
+      cas_server: '',
+      cas_validate_server: '',
+      cas_login_route: '',
+      cas_logout_route: '',
+      cas_validate_route: '',
+      cas_after_login: '/',
+      cas_user_map: {
+        username: { tag: 'cas:user' },
+        nickname: { tag: 'cas:attribute', attrs: { name: 'displayName' } },
+        email: { tag: 'cas:attribute', attrs: { name: 'email' } },
+        mobile: { tag: 'cas:attribute', attrs: { name: 'phone' } },
+        avatar: { tag: 'cas:attribute', attrs: { name: 'avatar' } },
+      },
+    }
+    return {
+      defaultForm,
+      labelCol: { span: 3 },
+      wrapperCol: { span: 10 },
+      form: _.cloneDeep(defaultForm),
+      rules: {
+        enable: [{ required: true }],
+        cas_server: [{ required: true, message: '请输入服务端地址' }],
+        cas_login_route: [{ required: true, message: '请输入登录路由' }],
+        cas_logout_route: [{ required: true, message: '请输入注销路由' }],
+        cas_validate_route: [{ required: true, message: '请输入验证路由' }],
+      },
+      isJsonRight: true,
+    }
+  },
+  methods: {
+    setData(data) {
+      if (data) {
+        this.form = data
+      } else {
+        this.form = _.cloneDeep(this.defaultForm)
+      }
+    },
+    getData(callback) {
+      this.$refs.form.validate((valid) => {
+        if (valid && this.isJsonRight) {
+          callback(this.form)
+        }
+      })
+    },
+    onJsonChange(value) {
+      this.isJsonRight = true
+    },
+    onJsonError() {
+      this.isJsonRight = false
+    },
+  },
+}
+</script>
+
+<style></style>

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

@@ -0,0 +1,57 @@
+<template>
+  <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
+    <SpanTitle>基本</SpanTitle>
+    <a-form-model-item
+      label="自动跳转到第三方登录页"
+      prop="auto_redirect"
+      help="如果关闭，则会弹出跳转到第三方登录页的确认，点取消按钮会进入系统内置的登录页"
+    >
+      <a-switch
+        :checked="Boolean(form.auto_redirect)"
+        @change="
+          () => {
+            $set(form, 'auto_redirect', Number(!form.auto_redirect))
+          }
+        "
+      />
+    </a-form-model-item>
+  </a-form-model>
+</template>
+
+<script>
+import SpanTitle from '../components/spanTitle.vue'
+export default {
+  name: 'AuthCommonConfig',
+  components: { SpanTitle },
+  data() {
+    return {
+      labelCol: { span: 5 },
+      wrapperCol: { span: 10 },
+      form: {
+        auto_redirect: 0,
+      },
+      rules: {
+        auto_redirect: [{ required: true }],
+      },
+    }
+  },
+  methods: {
+    setData(data) {
+      if (data) {
+        this.form = data
+      } else {
+        this.form = { auto_redirect: 0 }
+      }
+    },
+    getData(callback) {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          callback(this.form)
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style></style>

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

@@ -0,0 +1,139 @@
+<template>
+  <a-tabs type="card" class="ops-tab" v-model="activeKey" @change="changeActiveKey">
+    <a-tab-pane v-for="item in authList" :key="item.value">
+      <span slot="tab">
+        {{ item.label }}
+        <a-icon
+          v-if="enable_list.find((en) => en.auth_type === item.value)"
+          type="check-circle"
+          theme="filled"
+          style="color:#2f54eb"
+        />
+      </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-space>
+            <a-button :loading="loading" type="primary" @click="handleSave">保存</a-button>
+            <a-button :loading="loading" @click="handleReset">重置</a-button>
+          </a-space>
+        </div>
+      </div>
+    </a-tab-pane>
+  </a-tabs>
+</template>
+
+<script>
+import _ from 'lodash'
+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'
+export default {
+  name: 'Auth',
+  components: { LDAP, CAS, AuthCommonConfig, OAUTH2 },
+  data() {
+    const authList = [
+      {
+        value: 'LDAP',
+        label: 'LDAP',
+      },
+      {
+        value: 'CAS',
+        label: 'CAS',
+      },
+      {
+        value: 'OAUTH2',
+        label: 'OAUTH2',
+      },
+      {
+        value: 'OIDC',
+        label: 'OIDC',
+      },
+      {
+        value: 'AuthCommonConfig',
+        label: '通用',
+      },
+    ]
+    return {
+      authList,
+      activeKey: 'LDAP',
+      dataTypeId: null,
+      loading: false,
+      enable_list: [],
+    }
+  },
+  mounted() {
+    this.changeActiveKey()
+    this.getAuthDataEnable()
+  },
+  methods: {
+    getAuthDataEnable() {
+      getAuthDataEnable().then((res) => {
+        this.enable_list = res.enable_list
+      })
+    },
+    changeActiveKey() {
+      getAuthData(this.activeKey).then((res) => {
+       const _res = _.cloneDeep(res)
+        this.$refs[this.activeKey][0].setData(_res?.data ?? null)
+        if (_res && JSON.stringify(_res) !== '{}') {
+          this.dataTypeId = _res.id
+        } else {
+          this.dataTypeId = null
+        }
+      })
+    },
+    handleSave() {
+      this.$refs[this.activeKey][0].getData(async (data) => {
+        this.loading = true
+        if (this.dataTypeId) {
+          await putAuthData(this.activeKey, this.dataTypeId, { data }).finally(() => {
+            this.loading = false
+          })
+        } else {
+          await postAuthData(this.activeKey, { data }).finally(() => {
+            this.loading = false
+          })
+        }
+        this.$message.success('保存成功')
+        this.changeActiveKey()
+        this.getAuthDataEnable()
+      })
+    },
+    handleReset() {
+      this.changeActiveKey()
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.setting-auth {
+  background-color: #fff;
+  height: calc(100vh - 128px);
+  overflow: auto;
+  border-radius: 0 5px 5px 5px;
+  padding-top: 24px;
+  .setting-auth-operation {
+    padding: 0 100px 24px 100px;
+    text-align: right;
+  }
+}
+</style>
+
+<style lang="less">
+.setting-auth {
+  .jsoneditor-outer {
+    height: var(--custom-height) !important;
+    border: 1px solid #2f54eb;
+  }
+  div.jsoneditor-menu {
+    background-color: #2f54eb;
+  }
+  .jsoneditor-modes {
+    display: none;
+  }
+}
+</style>

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

@@ -0,0 +1,80 @@
+<template>
+  <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
+    <SpanTitle>基本</SpanTitle>
+    <a-form-model-item label="是否启用" prop="enable">
+      <a-switch
+        :checked="Boolean(form.enable)"
+        @change="
+          () => {
+            $set(form, 'enable', Number(!form.enable))
+          }
+        "
+      />
+    </a-form-model-item>
+    <a-form-model-item
+      label="服务器地址"
+      prop="ldap_server"
+      help="例如: 192.168.1.6 或者  ldap://192.168.1.6 或者 ldap://192.168.1.6:389"
+    >
+      <a-input v-model="form.ldap_server" placeholder="请输入服务器地址" />
+    </a-form-model-item>
+    <a-form-model-item label="域" prop="ldap_domain">
+      <a-input v-model="form.ldap_domain" placeholder="请输入域" />
+    </a-form-model-item>
+    <SpanTitle>用户</SpanTitle>
+    <a-form-model-item
+      label="用户名称"
+      prop="ldap_user_dn"
+      help="用户dn: cn={},ou=users,dc=xxx,dc=com   {}会替换成用户名"
+    >
+      <a-input v-model="form.ldap_user_dn" placeholder="请输入用户名称" />
+    </a-form-model-item>
+  </a-form-model>
+</template>
+
+<script>
+import SpanTitle from '../components/spanTitle.vue'
+export default {
+  name: 'LDAP',
+  components: { SpanTitle },
+  data() {
+    return {
+      labelCol: { span: 3 },
+      wrapperCol: { span: 10 },
+      form: {
+        enable: 0,
+        ldap_server: '',
+        ldap_domain: '',
+        ldap_user_dn: 'cn={},ou=users,dc=xxx,dc=com',
+      },
+      rules: {
+        enable: [{ required: true }],
+        ldap_server: [{ required: true, message: '请输入服务器地址' }],
+      },
+    }
+  },
+  methods: {
+    setData(data) {
+      if (data) {
+        this.form = { ...data }
+      } else {
+        this.form = {
+          enable: 0,
+          ldap_server: '',
+          ldap_domain: '',
+          ldap_user_dn: 'cn={},ou=users,dc=xxx,dc=com',
+        }
+      }
+    },
+    getData(callback) {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          callback(this.form)
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style></style>

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

@@ -0,0 +1,114 @@
+<template>
+  <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
+    <SpanTitle>基本</SpanTitle>
+    <a-form-model-item label="是否启用" prop="enable">
+      <a-switch
+        :checked="Boolean(form.enable)"
+        @change="
+          () => {
+            $set(form, 'enable', Number(!form.enable))
+          }
+        "
+      />
+    </a-form-model-item>
+    <a-form-model-item label="客户端ID" prop="client_id">
+      <a-input v-model="form.client_id" placeholder="请输入客户端ID" />
+    </a-form-model-item>
+    <a-form-model-item label="客户端密钥" prop="client_secret">
+      <a-input v-model="form.client_secret" placeholder="请输入客户端密钥" />
+    </a-form-model-item>
+    <a-form-model-item label="授权链接" prop="authorize_url">
+      <a-input v-model="form.authorize_url" placeholder="请输入授权链接" />
+    </a-form-model-item>
+    <a-form-model-item label="令牌链接" prop="token_url">
+      <a-input v-model="form.token_url" placeholder="请输入令牌链接" />
+    </a-form-model-item>
+    <SpanTitle>其他</SpanTitle>
+    <a-form-model-item label="用户信息" prop="user_info" :wrapper-col="{ span: 15 }">
+      <vue-json-editor
+        :style="{ '--custom-height': `${200}px` }"
+        v-model="form.user_info"
+        :showBtns="false"
+        mode="code"
+        lang="zh"
+        @json-change="onJsonChange"
+        @has-error="onJsonError"
+      />
+    </a-form-model-item>
+    <a-form-model-item label="范围" prop="scopes">
+      <a-select mode="tags" v-model="form.scopes" placeholder="请输入范围" />
+    </a-form-model-item>
+    <a-form-model-item label="重定向路由" prop="after_login">
+      <a-input v-model="form.after_login" placeholder="请输入重定向路由" />
+    </a-form-model-item>
+  </a-form-model>
+</template>
+
+<script>
+import _ from 'lodash'
+import vueJsonEditor from 'vue-json-editor'
+import SpanTitle from '../components/spanTitle.vue'
+export default {
+  name: 'OAUTH2',
+  components: { SpanTitle, vueJsonEditor },
+  props: {
+    data_type: {
+      type: String,
+      default: 'OAUTH2',
+    },
+  },
+  data() {
+    const defaultForm = {
+      enable: 0,
+      client_id: '',
+      client_secret: '',
+      authorize_url: '',
+      token_url: '',
+      user_info: {
+        url: 'https://{your-OAuth2Server-hostname}/api/userinfo',
+        email: 'email',
+        username: 'name',
+        avatar: 'picture',
+      },
+      scopes: this.data_type === 'OAUTH2' ? ['profile', 'email'] : ['profile', 'email', 'openId'],
+      after_login: '/',
+    }
+    return {
+      defaultForm,
+      labelCol: { span: 3 },
+      wrapperCol: { span: 10 },
+      form: _.cloneDeep(defaultForm),
+      rules: {
+        enable: [{ required: true }],
+        client_id: [{ required: true, message: '请输入客户端ID' }],
+        client_secret: [{ required: true, message: '请输入客户端密钥' }],
+      },
+      isJsonRight: true,
+    }
+  },
+  methods: {
+    setData(data) {
+      if (data) {
+        this.form = data
+      } else {
+        this.form = _.cloneDeep(this.defaultForm)
+      }
+    },
+    getData(callback) {
+      this.$refs.form.validate((valid) => {
+        if (valid && this.isJsonRight) {
+          callback(this.form)
+        }
+      })
+    },
+    onJsonChange(value) {
+      this.isJsonRight = true
+    },
+    onJsonError() {
+      this.isJsonRight = false
+    },
+  },
+}
+</script>
+
+<style></style>

cmdb-ui/src/views/user/Login.vue

@@ -51,21 +51,32 @@
             class="login-button"
             :loading="state.loginBtn"
             :disabled="state.loginBtn"
-          >确定</a-button
+          >登录</a-button
           >
         </a-form-item>
       </a-form>
+      <template v-if="_enable_list && _enable_list.length >= 1">
+        <a-divider style="font-size:14px">其他登录方式</a-divider>
+        <div style="text-align:center">
+          <span v-for="(item, index) in _enable_list" :key="item.auth_type">
+            <ops-icon :type="item.auth_type"/>
+            <a @click="otherLogin(item.auth_type)">{{ item.auth_type }}</a>
+            <a-divider v-if="index < _enable_list.length - 1" type="vertical" />
+          </span>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script>
 import md5 from 'md5'
-import { mapActions } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 import { timeFix } from '@/utils/util'
 import appConfig from '@/config/app.js'
 
 export default {
+  name: 'Login',
   data() {
     return {
       customActiveKey: 'tab1',
@@ -84,9 +95,21 @@ export default {
       },
     }
   },
+  computed: {
+    ...mapState({ auth_enable: (state) => state?.user?.auth_enable ?? {} }),
+    enable_list() {
+      return this.auth_enable.enable_list ?? []
+    },
+    _enable_list() {
+      return this.enable_list.filter((en) => en.auth_type !== 'LDAP')
+    },
+  },
   created() {},
+  async mounted() {
+    await this.GetAuthDataEnable()
+  },
   methods: {
-    ...mapActions(['Login', 'Logout']),
+    ...mapActions(['Login', 'GetAuthDataEnable']),
     // handler
     handleUsernameOrEmail(rule, value, callback) {
       const { state } = this
@@ -118,7 +141,8 @@ export default {
           delete loginParams.username
           loginParams[!state.loginType ? 'email' : 'username'] = values.username
           loginParams.password = appConfig.useEncryption ? md5(values.password) : values.password
-          Login(loginParams)
+          localStorage.setItem('ops_auth_type', '')
+          Login({ userInfo: loginParams })
             .then((res) => this.loginSuccess(res))
             .finally(() => {
               state.loginBtn = false
@@ -130,10 +154,11 @@ export default {
         }
       })
     },
-
+    otherLogin(auth_type) {
+      this.Login({ userInfo: {}, auth_type })
+    },
     loginSuccess(res) {
-      console.log(res)
-      this.$router.push({ path: this.$route.query.redirect })
+      this.$router.push({ path: this.$route.query?.redirect ?? '/' })
       // 延迟 1 秒显示欢迎信息
       setTimeout(() => {
         this.$notification.success({

cmdb-ui/src/views/user/Logout.vue

@@ -1,23 +1,124 @@
 <template>
-  <h1>{{ msg }}</h1>
+  <div class="ops-logout">
+    <div
+      class="ops-logout-box"
+      v-if="_enable_list && _enable_list.length === 1 && time && !loading && !auth_auto_redirect"
+    >
+      <img src="../../assets/ops_logout.png" />
+      <p v-if="_enable_list && _enable_list.length">
+        <strong>您即将跳转至{{ _enable_list[0].auth_type }}</strong>
+      </p>
+      <p>
+        <span style="color:#2f54eb">{{ time }}</span>
+        秒后自动跳转
+      </p>
+      <a-space size="large">
+        <a-button type="primary" @click="handleConfirm">确认</a-button>
+        <a-button @click="handleCancel">取消</a-button>
+      </a-space>
+    </div>
+  </div>
 </template>
 
 <script>
-import config from '@/config/setting'
-import appConfig from '@/config/app'
-
+import { mapState, mapActions } from 'vuex'
 export default {
   name: 'Logout',
   data() {
     return {
-      msg: '正在退出，请稍后',
+      interval: null,
+      time: 5,
+      loading: false,
     }
   },
-  mounted() {
-    if (config.useSSO) {
-        window.location.href = appConfig.ssoLogoutURL
-    } else {
+  computed: {
+    ...mapState({ auth_enable: (state) => state?.user?.auth_enable ?? {} }),
+    enable_list() {
+      return this.auth_enable.enable_list ?? []
+    },
+    _enable_list() {
+      return this.enable_list.filter((en) => en.auth_type !== 'LDAP')
+    },
+    auth_auto_redirect() {
+      return this.auth_enable.auth_auto_redirect ?? 0
+    },
+  },
+  watch: {
+    time: {
+      immediate: true,
+      handler(newValue) {
+        if (!newValue) {
+          if (this.interval) {
+            clearInterval(this.interval)
+            this.interval = null
+          }
+          if (this._enable_list.length === 1) {
+            this.Login({ userInfo: {}, auth_type: this._enable_list[0].auth_type })
+          }
+        }
+      },
+    },
+  },
+  async mounted() {
+    this.loading = true
+    await this.GetAuthDataEnable()
+    this.loading = false
+    if (!this._enable_list.length || this._enable_list.length > 1) {
+      this.$router.push('/user/login')
     }
+    if (this.auth_auto_redirect) {
+      this.time = 0
+    } else {
+      this.time = 5
+    }
+    if (this.time) {
+      this.interval = setInterval(() => {
+        this.time--
+      }, 1000)
+    }
+  },
+  beforeDestroy() {
+    if (this.interval) {
+      clearInterval(this.interval)
+      this.interval = null
+    }
+  },
+  methods: {
+    ...mapActions(['Login', 'GetAuthDataEnable']),
+    handleConfirm() {
+      if (this._enable_list.length === 1) {
+        this.Login({ userInfo: {}, auth_type: this._enable_list[0].auth_type })
+      }
+    },
+    handleCancel() {
+      this.$router.push('/user/login')
+    },
   },
 }
 </script>
+
+<style lang="less" scoped>
+.ops-logout {
+  background-color: #f0f5ff;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .ops-logout-box {
+    width: 450px;
+    height: 275px;
+    border-radius: 12px;
+    background-color: #fff;
+    position: absolute;
+    left: 50%;
+    top: 30%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    img {
+      width: 80%;
+    }
+  }
+}
+</style>