feat(ui):auth setting (#310)

This commit is contained in:
wang-liang0615 2023-12-15 10:33:38 +08:00 committed by GitHub
parent 6aef26b82c
commit a21afbe909
27 changed files with 3039 additions and 82 deletions

File diff suppressed because it is too large Load Diff

View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 3857903 */
src: url('iconfont.woff2?t=1698273699449') format('woff2'),
url('iconfont.woff?t=1698273699449') format('woff'),
url('iconfont.ttf?t=1698273699449') format('truetype');
src: url('iconfont.woff2?t=1702544951995') format('woff2'),
url('iconfont.woff?t=1702544951995') format('woff'),
url('iconfont.ttf?t=1702544951995') format('truetype');
}
.iconfont {
@ -13,6 +13,274 @@
-moz-osx-font-smoothing: grayscale;
}
.OAUTH2:before {
content: "\e8d8";
}
.OIDC:before {
content: "\e8d6";
}
.CAS:before {
content: "\e8d7";
}
.ops-setting-auth:before {
content: "\e8d5";
}
.ops-setting-auth-selected:before {
content: "\e8d4";
}
.a-itsm-knowledge2:before {
content: "\e8d2";
}
.itsm-qrdownload:before {
content: "\e8d3";
}
.oneterm-playback:before {
content: "\e8d1";
}
.oneterm-disconnect:before {
content: "\e8d0";
}
.ops-oneterm-publickey-selected:before {
content: "\e8cf";
}
.ops-oneterm-publickey:before {
content: "\e8ce";
}
.ops-oneterm-gateway:before {
content: "\e8b9";
}
.ops-oneterm-gateway-selected:before {
content: "\e8bf";
}
.ops-oneterm-account:before {
content: "\e8c0";
}
.ops-oneterm-account-selected:before {
content: "\e8c1";
}
.ops-oneterm-command:before {
content: "\e8c2";
}
.ops-oneterm-command-selected:before {
content: "\e8c3";
}
.ops-oneterm-assetlist:before {
content: "\e8c4";
}
.ops-oneterm-assetlist-selected:before {
content: "\e8c5";
}
.ops-oneterm-sessiononline:before {
content: "\e8c6";
}
.ops-oneterm-sessiononline-selected:before {
content: "\e8c7";
}
.ops-oneterm-sessionhistory-selected:before {
content: "\e8c8";
}
.ops-oneterm-sessionhistory:before {
content: "\e8c9";
}
.ops-oneterm-login:before {
content: "\e8ca";
}
.ops-oneterm-login-selected:before {
content: "\e8cb";
}
.ops-oneterm-operation:before {
content: "\e8cc";
}
.ops-oneterm-operation-selected:before {
content: "\e8cd";
}
.ops-oneterm-workstation-selected:before {
content: "\e8b7";
}
.ops-oneterm-workstation:before {
content: "\e8b8";
}
.oneterm-file-selected:before {
content: "\e8be";
}
.oneterm-file:before {
content: "\e8bc";
}
.oneterm-time:before {
content: "\e8bd";
}
.oneterm-download:before {
content: "\e8bb";
}
.oneterm-commandrecord:before {
content: "\e8ba";
}
.oneterm-asset:before {
content: "\e8b6";
}
.oneterm-total_asset:before {
content: "\e8b5";
}
.oneterm-switch:before {
content: "\e8b4";
}
.oneterm-session:before {
content: "\e8b3";
}
.oneterm-connect:before {
content: "\e8b2";
}
.oneterm-login:before {
content: "\e8b1";
}
.ops-oneterm-dashboard:before {
content: "\e8af";
}
.ops-oneterm-dashboard-selected:before {
content: "\e8b0";
}
.oneterm-recentsession:before {
content: "\e8ae";
}
.oneterm-myassets:before {
content: "\e8ad";
}
.ops-oneterm-log:before {
content: "\e8aa";
}
.ops-oneterm-session-selected:before {
content: "\e8ab";
}
.ops-oneterm-session:before {
content: "\e8ac";
}
.ops-oneterm-log-selected:before {
content: "\e8a9";
}
.ops-oneterm-assets:before {
content: "\e8a7";
}
.ops-oneterm-assets-selected:before {
content: "\e8a8";
}
.itsm-down:before {
content: "\e8a5";
}
.itsm-up:before {
content: "\e8a6";
}
.itsm-download:before {
content: "\e8a4";
}
.itsm-print:before {
content: "\e8a3";
}
.itsm-view:before {
content: "\e8a2";
}
.itsm-word:before {
content: "\e8a1";
}
.datainsight-custom:before {
content: "\e89e";
}
.datainsight-prometheus:before {
content: "\e89f";
}
.datainsight-zabbix:before {
content: "\e8a0";
}
.setting-mainpeople:before {
content: "\e89a";
}
.setting-deputypeople:before {
content: "\e89d";
}
.ops-setting-duty:before {
content: "\e89c";
}
.ops-setting-duty-selected:before {
content: "\e89b";
}
.datainsight-sequential:before {
content: "\e899";
}
.datainsight-close:before {
content: "\e898";
}
.datainsight-handle:before {
content: "\e897";
}
.datainsight-table:before {
content: "\e896";
}
.icon-xianxing-password:before {
content: "\e894";
}
@ -21,11 +289,11 @@
content: "\e895";
}
.a-itsm-oneclickdownload:before {
.itsm-download-all:before {
content: "\e892";
}
.a-itsm-packagedownload:before {
.itsm-download-package:before {
content: "\e893";
}

File diff suppressed because one or more lines are too long

View File

@ -5,6 +5,475 @@
"css_prefix_text": "",
"description": "",
"glyphs": [
{
"icon_id": "38566548",
"name": "OAuth2.0",
"font_class": "OAUTH2",
"unicode": "e8d8",
"unicode_decimal": 59608
},
{
"icon_id": "38566584",
"name": "OIDC",
"font_class": "OIDC",
"unicode": "e8d6",
"unicode_decimal": 59606
},
{
"icon_id": "38566578",
"name": "cas",
"font_class": "CAS",
"unicode": "e8d7",
"unicode_decimal": 59607
},
{
"icon_id": "38547395",
"name": "setting-authentication",
"font_class": "ops-setting-auth",
"unicode": "e8d5",
"unicode_decimal": 59605
},
{
"icon_id": "38547389",
"name": "setting-authentication-selected",
"font_class": "ops-setting-auth-selected",
"unicode": "e8d4",
"unicode_decimal": 59604
},
{
"icon_id": "38533133",
"name": "itsm-knowledge (2)",
"font_class": "a-itsm-knowledge2",
"unicode": "e8d2",
"unicode_decimal": 59602
},
{
"icon_id": "38531868",
"name": "itsm-QRcode",
"font_class": "itsm-qrdownload",
"unicode": "e8d3",
"unicode_decimal": 59603
},
{
"icon_id": "38413515",
"name": "oneterm-playback",
"font_class": "oneterm-playback",
"unicode": "e8d1",
"unicode_decimal": 59601
},
{
"icon_id": "38413481",
"name": "oneterm-disconnect",
"font_class": "oneterm-disconnect",
"unicode": "e8d0",
"unicode_decimal": 59600
},
{
"icon_id": "38407867",
"name": "oneterm-key-selected",
"font_class": "ops-oneterm-publickey-selected",
"unicode": "e8cf",
"unicode_decimal": 59599
},
{
"icon_id": "38407915",
"name": "oneterm-key",
"font_class": "ops-oneterm-publickey",
"unicode": "e8ce",
"unicode_decimal": 59598
},
{
"icon_id": "38311855",
"name": "oneterm-gateway",
"font_class": "ops-oneterm-gateway",
"unicode": "e8b9",
"unicode_decimal": 59577
},
{
"icon_id": "38311938",
"name": "oneterm-gateway-selected",
"font_class": "ops-oneterm-gateway-selected",
"unicode": "e8bf",
"unicode_decimal": 59583
},
{
"icon_id": "38311957",
"name": "oneterm-account",
"font_class": "ops-oneterm-account",
"unicode": "e8c0",
"unicode_decimal": 59584
},
{
"icon_id": "38311961",
"name": "oneterm-account-selected",
"font_class": "ops-oneterm-account-selected",
"unicode": "e8c1",
"unicode_decimal": 59585
},
{
"icon_id": "38311974",
"name": "oneterm-command",
"font_class": "ops-oneterm-command",
"unicode": "e8c2",
"unicode_decimal": 59586
},
{
"icon_id": "38311976",
"name": "oneterm-command-selected",
"font_class": "ops-oneterm-command-selected",
"unicode": "e8c3",
"unicode_decimal": 59587
},
{
"icon_id": "38311979",
"name": "oneterm-asset_list",
"font_class": "ops-oneterm-assetlist",
"unicode": "e8c4",
"unicode_decimal": 59588
},
{
"icon_id": "38311985",
"name": "oneterm-asset_list-selected",
"font_class": "ops-oneterm-assetlist-selected",
"unicode": "e8c5",
"unicode_decimal": 59589
},
{
"icon_id": "38312030",
"name": "oneterm-online",
"font_class": "ops-oneterm-sessiononline",
"unicode": "e8c6",
"unicode_decimal": 59590
},
{
"icon_id": "38312152",
"name": "oneterm-online-selected",
"font_class": "ops-oneterm-sessiononline-selected",
"unicode": "e8c7",
"unicode_decimal": 59591
},
{
"icon_id": "38312154",
"name": "oneterm-history-selected",
"font_class": "ops-oneterm-sessionhistory-selected",
"unicode": "e8c8",
"unicode_decimal": 59592
},
{
"icon_id": "38312155",
"name": "oneterm-history",
"font_class": "ops-oneterm-sessionhistory",
"unicode": "e8c9",
"unicode_decimal": 59593
},
{
"icon_id": "38312404",
"name": "oneterm-entry_log",
"font_class": "ops-oneterm-login",
"unicode": "e8ca",
"unicode_decimal": 59594
},
{
"icon_id": "38312423",
"name": "oneterm-entry_log-selected",
"font_class": "ops-oneterm-login-selected",
"unicode": "e8cb",
"unicode_decimal": 59595
},
{
"icon_id": "38312426",
"name": "oneterm-operation_log",
"font_class": "ops-oneterm-operation",
"unicode": "e8cc",
"unicode_decimal": 59596
},
{
"icon_id": "38312445",
"name": "oneterm-operation_log-selected",
"font_class": "ops-oneterm-operation-selected",
"unicode": "e8cd",
"unicode_decimal": 59597
},
{
"icon_id": "38307876",
"name": "oneterm-workstation-selected",
"font_class": "ops-oneterm-workstation-selected",
"unicode": "e8b7",
"unicode_decimal": 59575
},
{
"icon_id": "38307871",
"name": "oneterm-workstation",
"font_class": "ops-oneterm-workstation",
"unicode": "e8b8",
"unicode_decimal": 59576
},
{
"icon_id": "38302246",
"name": "oneterm-file-selected",
"font_class": "oneterm-file-selected",
"unicode": "e8be",
"unicode_decimal": 59582
},
{
"icon_id": "38302255",
"name": "oneterm-file",
"font_class": "oneterm-file",
"unicode": "e8bc",
"unicode_decimal": 59580
},
{
"icon_id": "38203528",
"name": "oneterm-time",
"font_class": "oneterm-time",
"unicode": "e8bd",
"unicode_decimal": 59581
},
{
"icon_id": "38203331",
"name": "oneterm-download",
"font_class": "oneterm-download",
"unicode": "e8bb",
"unicode_decimal": 59579
},
{
"icon_id": "38201351",
"name": "oneterm-command record",
"font_class": "oneterm-commandrecord",
"unicode": "e8ba",
"unicode_decimal": 59578
},
{
"icon_id": "38199341",
"name": "oneterm-connected assets",
"font_class": "oneterm-asset",
"unicode": "e8b6",
"unicode_decimal": 59574
},
{
"icon_id": "38199350",
"name": "oneterm-total assets",
"font_class": "oneterm-total_asset",
"unicode": "e8b5",
"unicode_decimal": 59573
},
{
"icon_id": "38199303",
"name": "oneterm-switch (3)",
"font_class": "oneterm-switch",
"unicode": "e8b4",
"unicode_decimal": 59572
},
{
"icon_id": "38199317",
"name": "oneterm-session",
"font_class": "oneterm-session",
"unicode": "e8b3",
"unicode_decimal": 59571
},
{
"icon_id": "38199339",
"name": "oneterm-connection",
"font_class": "oneterm-connect",
"unicode": "e8b2",
"unicode_decimal": 59570
},
{
"icon_id": "38198321",
"name": "oneterm-log in",
"font_class": "oneterm-login",
"unicode": "e8b1",
"unicode_decimal": 59569
},
{
"icon_id": "38194554",
"name": "oneterm-dashboard",
"font_class": "ops-oneterm-dashboard",
"unicode": "e8af",
"unicode_decimal": 59567
},
{
"icon_id": "38194525",
"name": "oneterm-dashboard-selected",
"font_class": "ops-oneterm-dashboard-selected",
"unicode": "e8b0",
"unicode_decimal": 59568
},
{
"icon_id": "38194352",
"name": "oneterm-recent session",
"font_class": "oneterm-recentsession",
"unicode": "e8ae",
"unicode_decimal": 59566
},
{
"icon_id": "38194383",
"name": "oneterm-my assets",
"font_class": "oneterm-myassets",
"unicode": "e8ad",
"unicode_decimal": 59565
},
{
"icon_id": "38194089",
"name": "oneterm-log",
"font_class": "ops-oneterm-log",
"unicode": "e8aa",
"unicode_decimal": 59562
},
{
"icon_id": "38194088",
"name": "oneterm-conversation-selected",
"font_class": "ops-oneterm-session-selected",
"unicode": "e8ab",
"unicode_decimal": 59563
},
{
"icon_id": "38194065",
"name": "oneterm-conversation",
"font_class": "ops-oneterm-session",
"unicode": "e8ac",
"unicode_decimal": 59564
},
{
"icon_id": "38194105",
"name": "oneterm-log-selected",
"font_class": "ops-oneterm-log-selected",
"unicode": "e8a9",
"unicode_decimal": 59561
},
{
"icon_id": "38194054",
"name": "oneterm-assets",
"font_class": "ops-oneterm-assets",
"unicode": "e8a7",
"unicode_decimal": 59559
},
{
"icon_id": "38194055",
"name": "oneterm-assets-selected",
"font_class": "ops-oneterm-assets-selected",
"unicode": "e8a8",
"unicode_decimal": 59560
},
{
"icon_id": "38123087",
"name": "itsm-down",
"font_class": "itsm-down",
"unicode": "e8a5",
"unicode_decimal": 59557
},
{
"icon_id": "38123084",
"name": "itsm-up",
"font_class": "itsm-up",
"unicode": "e8a6",
"unicode_decimal": 59558
},
{
"icon_id": "38105374",
"name": "itsm-download",
"font_class": "itsm-download",
"unicode": "e8a4",
"unicode_decimal": 59556
},
{
"icon_id": "38105235",
"name": "itsm-print",
"font_class": "itsm-print",
"unicode": "e8a3",
"unicode_decimal": 59555
},
{
"icon_id": "38104997",
"name": "itsm-view",
"font_class": "itsm-view",
"unicode": "e8a2",
"unicode_decimal": 59554
},
{
"icon_id": "38105129",
"name": "itsm-word",
"font_class": "itsm-word",
"unicode": "e8a1",
"unicode_decimal": 59553
},
{
"icon_id": "38095730",
"name": "datainsight-custom",
"font_class": "datainsight-custom",
"unicode": "e89e",
"unicode_decimal": 59550
},
{
"icon_id": "38095729",
"name": "datainsight-prometheus",
"font_class": "datainsight-prometheus",
"unicode": "e89f",
"unicode_decimal": 59551
},
{
"icon_id": "38095728",
"name": "datainsight-zabbix",
"font_class": "datainsight-zabbix",
"unicode": "e8a0",
"unicode_decimal": 59552
},
{
"icon_id": "37944507",
"name": "setting-main people",
"font_class": "setting-mainpeople",
"unicode": "e89a",
"unicode_decimal": 59546
},
{
"icon_id": "37944503",
"name": "setting-deputy people",
"font_class": "setting-deputypeople",
"unicode": "e89d",
"unicode_decimal": 59549
},
{
"icon_id": "37940080",
"name": "ops-setting-duty",
"font_class": "ops-setting-duty",
"unicode": "e89c",
"unicode_decimal": 59548
},
{
"icon_id": "37940033",
"name": "ops-setting-duty-selected",
"font_class": "ops-setting-duty-selected",
"unicode": "e89b",
"unicode_decimal": 59547
},
{
"icon_id": "37841524",
"name": "datainsight-sequential",
"font_class": "datainsight-sequential",
"unicode": "e899",
"unicode_decimal": 59545
},
{
"icon_id": "37841535",
"name": "datainsight-close",
"font_class": "datainsight-close",
"unicode": "e898",
"unicode_decimal": 59544
},
{
"icon_id": "37841537",
"name": "datainsight-handle",
"font_class": "datainsight-handle",
"unicode": "e897",
"unicode_decimal": 59543
},
{
"icon_id": "37841515",
"name": "datainsight-table",
"font_class": "datainsight-table",
"unicode": "e896",
"unicode_decimal": 59542
},
{
"icon_id": "37830610",
"name": "icon-xianxing-password",
@ -22,14 +491,14 @@
{
"icon_id": "37822199",
"name": "itsm-oneclick download",
"font_class": "a-itsm-oneclickdownload",
"font_class": "itsm-download-all",
"unicode": "e892",
"unicode_decimal": 59538
},
{
"icon_id": "37822198",
"name": "itsm-package download",
"font_class": "a-itsm-packagedownload",
"font_class": "itsm-download-package",
"unicode": "e893",
"unicode_decimal": 59539
},

Binary file not shown.

31
cmdb-ui/src/api/auth.js Normal file
View File

@ -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',
})
}

View File

@ -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',

View File

@ -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'
}
})
}
/**

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

View File

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

View File

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

View File

@ -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

View File

@ -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()
}

View File

@ -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

View File

@ -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,

View File

@ -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'
})
})
},

View File

@ -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)

View File

@ -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)

View 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>

View 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>

View 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>

View 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>

View 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>

View File

@ -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({

View File

@ -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>