mirror of
https://github.com/veops/cmdb.git
synced 2025-09-21 21:09:21 +08:00
feat(ui):auth setting (#310)
This commit is contained in:
wang-liang0615
GitHub
111
cmdb-ui/src/views/setting/auth/cas.vue
Normal file
111
cmdb-ui/src/views/setting/auth/cas.vue
Normal file
@@ -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>
|
||||
57
cmdb-ui/src/views/setting/auth/common.vue
Normal file
57
cmdb-ui/src/views/setting/auth/common.vue
Normal file
@@ -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>
|
||||
139
cmdb-ui/src/views/setting/auth/index.vue
Normal file
139
cmdb-ui/src/views/setting/auth/index.vue
Normal file
@@ -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>
|
||||
80
cmdb-ui/src/views/setting/auth/ldap.vue
Normal file
80
cmdb-ui/src/views/setting/auth/ldap.vue
Normal file
@@ -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>
|
||||
114
cmdb-ui/src/views/setting/auth/oauth2.vue
Normal file
114
cmdb-ui/src/views/setting/auth/oauth2.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user