diff --git a/src/api/sso.ts b/src/api/sso.ts index 6c9760f..dbd283b 100644 --- a/src/api/sso.ts +++ b/src/api/sso.ts @@ -29,7 +29,7 @@ export const ssoLogin = ({ username, password }: Record) => { // 统一认证的地址 sso_uri: `${ssoHost || window.location.origin}/api/blade-auth`, // 必须加/ - redirect_uri: `${window.location.origin}/dashboard/workplace` + redirect_uri: `${window.location.origin}/` }); }; diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 8c3db32..ddfc45c 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -15,13 +15,12 @@ function Login() { const handleLogin = async () => { const url = new URL(window.location.href); const code = url.searchParams.get('code'); - const { origin } = window.location; + const { origin, pathname } = window.location; setIsNeedLogin(code === null); - console.log('code:', code); if (code) { - const callbackUrl = `${origin}`; + const callbackUrl = `${origin}/`; try { // 根据code向后端获取token const res: any = await getToken({ @@ -43,7 +42,6 @@ function Login() { return; } else { - // 使用Next.js标准路由跳转方式 router.push('/dashboard/workplace'); } } @@ -56,29 +54,46 @@ function Login() { useEffect(() => { document.body.setAttribute('arco-theme', 'light'); - // 模拟Vue的onMounted行为,在组件挂载后执行 handleLogin(); }, [router]); // 依赖数组包含router,确保router变化时能正确执行 return (
-
- -
Arco Design Pro
-
-
-
- + <> +
+ +
Arco Design Pro
-
-
-
- +
+
+ +
- {/*
*/} - {/*
*/} - {/*
*/} -
+
+
+ {isNeedLogin ? ( + + ) : ( +
+

获取授权中...

+
+
+ + + + + + +
+
+
+ )} +
+ {/*
*/} + {/*
*/} + {/*
*/} +
+
); } diff --git a/src/pages/login/style/index.module.less b/src/pages/login/style/index.module.less index 6176224..b73b126 100644 --- a/src/pages/login/style/index.module.less +++ b/src/pages/login/style/index.module.less @@ -118,3 +118,146 @@ color: var(--color-text-3) !important; } } + +.loading-content { + .page-loading-warp { + display: flex; + align-items: center; + justify-content: center; + padding: 26px; + + .ant-spin { + position: absolute; + display: none; + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; + color: rgba(0, 0, 0, 0.65); + color: #1890ff; + font-size: 14px; + font-variant: tabular-nums; + line-height: 1.5; + text-align: center; + list-style: none; + opacity: 0; + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), + -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-font-feature-settings: 'tnum'; + font-feature-settings: 'tnum'; + } + + .ant-spin-spinning { + position: static; + display: inline-block; + opacity: 1; + } + + .ant-spin-dot { + position: relative; + display: inline-block; + width: 20px; + height: 20px; + font-size: 20px; + } + + .ant-spin-dot-item { + position: absolute; + display: block; + width: 9px; + height: 9px; + background-color: #0e42d2; + border-radius: 100%; + -webkit-transform: scale(0.75); + -ms-transform: scale(0.75); + transform: scale(0.75); + -webkit-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + transform-origin: 50% 50%; + opacity: 0.3; + -webkit-animation: antspinmove 1s infinite linear alternate; + animation: antSpinMove 1s infinite linear alternate; + } + + .ant-spin-dot-item:nth-child(1) { + top: 0; + left: 0; + } + + .ant-spin-dot-item:nth-child(2) { + top: 0; + right: 0; + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; + } + + .ant-spin-dot-item:nth-child(3) { + right: 0; + bottom: 0; + -webkit-animation-delay: 0.8s; + animation-delay: 0.8s; + } + + .ant-spin-dot-item:nth-child(4) { + bottom: 0; + left: 0; + -webkit-animation-delay: 1.2s; + animation-delay: 1.2s; + } + + .ant-spin-dot-spin { + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-animation: antrotate 1.2s infinite linear; + animation: antRotate 1.2s infinite linear; + } + + .ant-spin-lg .ant-spin-dot { + width: 32px; + height: 32px; + font-size: 32px; + } + + .ant-spin-lg .ant-spin-dot i { + width: 14px; + height: 14px; + } + + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + .ant-spin-blur { + background: #fff; + opacity: 0.5; + } + } + + @-webkit-keyframes antSpinMove { + to { + opacity: 1; + } + } + + @keyframes antSpinMove { + to { + opacity: 1; + } + } + + @-webkit-keyframes antRotate { + to { + -webkit-transform: rotate(405deg); + transform: rotate(405deg); + } + } + + @keyframes antRotate { + to { + -webkit-transform: rotate(405deg); + transform: rotate(405deg); + } + } + } +}