mirror of
https://github.com/veops/cmdb.git
synced 2025-08-08 22:57:08 +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>
|
||||
@@ -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({
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user