Skip to content

Commit 4042b8a

Browse files
zzyanghzzyangh
committed
[fix]: Default jump to SQL workbench adjusted to touch after logging in
1 parent 4d86310 commit 4042b8a

File tree

8 files changed

+263
-106
lines changed

8 files changed

+263
-106
lines changed

‎packages/base/src/App.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,8 @@ export const Wrapper: React.FC<{
9696
return <>{!initRenderApp && children}</>;
9797
};
9898
function App() {
99-
const { token } = useSelector((state: IReduxState) => ({
100-
token: state.user.token
99+
const { isAfterLoggingIn } = useSelector((state: IReduxState) => ({
100+
isAfterLoggingIn: !state.user.isLoggingIn && !!state.user.token
101101
}));
102102
const dispatch = useDispatch();
103103
const { notificationContextHolder } = useNotificationContext();
@@ -160,7 +160,9 @@ function App() {
160160
userOperationPermissions
161161
]);
162162
const elements = useRoutes(
163-
token ? (AuthRouterConfigData as RouteObject[]) : unAuthRouterConfig
163+
isAfterLoggingIn
164+
? (AuthRouterConfigData as RouteObject[])
165+
: unAuthRouterConfig
164166
);
165167
useChangeTheme();
166168
const themeData = useMemo(() => {
@@ -204,10 +206,10 @@ function App() {
204206
});
205207
}, [dispatch, fetchModuleSupportStatus, getUserBySession, updateDriverList]);
206208
useEffect(() => {
207-
if (token) {
209+
if (isAfterLoggingIn) {
208210
getInitialData();
209211
}
210-
}, [token, getInitialData]);
212+
}, [getInitialData, isAfterLoggingIn]);
211213
useEffect(() => {
212214
i18n.changeLanguage(currentLanguage);
213215
}, [currentLanguage]);
@@ -314,7 +316,7 @@ function App() {
314316
<StyledEngineProvider injectFirst>
315317
<ThemeProvider theme={themeData}>
316318
{notificationContextHolder}
317-
<EmptyBox if={!!token} defaultNode={<>{elements}</>}>
319+
<EmptyBox if={isAfterLoggingIn} defaultNode={<>{elements}</>}>
318320
<ErrorBoundary>{body}</ErrorBoundary>
319321
</EmptyBox>
320322
</ThemeProvider>

‎packages/base/src/hooks/useNavigateToWorkbench/index.ts‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { useRequest } from 'ahooks';
2+
import { useDispatch, useSelector } from 'react-redux';
3+
import { DmsApi } from '@actiontech/shared/lib/api';
4+
import { ResponseCode } from '@actiontech/dms-kit';
5+
import useRecentlySelectedZone from '@actiontech/dms-kit/es/features/useRecentlySelectedZone';
6+
import { IReduxState } from '../../store';
7+
import { updateAvailabilityZoneTips } from '../../store/availabilityZone';
8+
9+
const useNavigateToWorkbench = () => {
10+
const dispatch = useDispatch();
11+
12+
const availabilityZoneTips = useSelector(
13+
(state: IReduxState) => state.availabilityZone.availabilityZoneTips
14+
);
15+
16+
const { availabilityZone, updateRecentlySelectedZone } =
17+
useRecentlySelectedZone();
18+
19+
const {
20+
runAsync: getAvailabilityZoneTipsAsync,
21+
loading: getAvailabilityZoneTipsLoading
22+
} = useRequest(
23+
() =>
24+
DmsApi.GatewayService.GetGatewayTips().then((res) => {
25+
if (res.data.code === ResponseCode.SUCCESS) {
26+
return res.data.data;
27+
}
28+
return [];
29+
}),
30+
{
31+
onSuccess: (res) => {
32+
dispatch(
33+
updateAvailabilityZoneTips({
34+
availabilityZoneTips: res ?? []
35+
})
36+
);
37+
},
38+
manual: true
39+
}
40+
);
41+
42+
const {
43+
loading: navigateToWorkbenchLoading,
44+
runAsync: navigateToWorkbenchAsync
45+
} = useRequest(
46+
() => {
47+
return DmsApi.CloudBeaverService.GetSQLQueryConfiguration().then(
48+
(res) => {
49+
if (res.data.code === ResponseCode.SUCCESS) {
50+
return res.data.data;
51+
}
52+
}
53+
);
54+
},
55+
{
56+
manual: true,
57+
onSuccess: (res) => {
58+
if (
59+
res?.enable_sql_query &&
60+
res.sql_query_root_uri &&
61+
res.sql_query_root_uri !== location.pathname
62+
) {
63+
// 如果当前设置了可用区 并且没有最近选择的可用区记录 则设置一个默认的可用区
64+
if (!!availabilityZoneTips.length && !availabilityZone) {
65+
updateRecentlySelectedZone(availabilityZoneTips[0]);
66+
}
67+
68+
// res.sql_query_root_uri !== location.pathname 防止无限刷新
69+
// 因为sql_query_root_uri是不携带origin的，只有pathname。所以开发环境localhost不可以直接跳转到CB
70+
// #if [PROD]
71+
window.location.href = res.sql_query_root_uri;
72+
// #endif
73+
}
74+
}
75+
}
76+
);
77+
78+
return {
79+
navigateToWorkbenchLoading,
80+
navigateToWorkbenchAsync,
81+
getAvailabilityZoneTipsAsync,
82+
getAvailabilityZoneTipsLoading
83+
};
84+
};
85+
86+
export default useNavigateToWorkbench;

‎packages/base/src/hooks/useSessionUser/index.tsx‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { ResponseCode } from '@actiontech/dms-kit';
44
import { updateUserUid } from '../../store/user';
55
import { useUserInfo } from '@actiontech/shared/lib/features';
66
import Session from '@actiontech/shared/lib/api/base/service/Session';
7+
import User from '@actiontech/shared/lib/api/base/service/User';
8+
import { GetUserSystemEnum } from '@actiontech/shared/lib/api/base/service/common.enum';
79

810
const useSessionUser = () => {
911
const dispatch = useDispatch();
@@ -28,10 +30,34 @@ const useSessionUser = () => {
2830
}
2931
});
3032

33+
const {
34+
data: shouldNavigateToWorkbench,
35+
runAsync: getSessionUserInfoAsync,
36+
loading: getSessionUserSystemLoading
37+
} = useRequest(
38+
() =>
39+
Session.GetUserBySession({}).then((res) => {
40+
if (res.data.code === ResponseCode.SUCCESS) {
41+
const uid = res.data.data?.user_uid ?? '';
42+
return User.GetUser({ user_uid: uid }).then((resp) => {
43+
if (resp.data.code === ResponseCode.SUCCESS) {
44+
return resp.data.data?.system === GetUserSystemEnum.WORKBENCH;
45+
}
46+
});
47+
}
48+
}),
49+
{
50+
manual: true
51+
}
52+
);
53+
3154
return {
3255
sessionUser,
3356
getSessionUserLoading,
34-
getUserBySession
57+
getUserBySession,
58+
getSessionUserInfoAsync,
59+
shouldNavigateToWorkbench,
60+
getSessionUserSystemLoading
3561
};
3662
};
3763

‎packages/base/src/page/BindUser/index.tsx‎

Lines changed: 75 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
import { useCallback, useEffect, useMemo, useRef } from 'react';
1+
import {
2+
useCallback,
3+
useEffect,
4+
useMemo,
5+
useRef,
6+
startTransition
7+
} from 'react';
28
import { useTranslation } from 'react-i18next';
39
import { useDispatch } from 'react-redux';
410
import { Typography, Form } from 'antd';
511
import { OauthLoginFormFields } from './index.type';
6-
import { updateToken } from '../../store/user';
12+
import { updateToken, updateIsLoggingIn } from '../../store/user';
713
import { ResponseCode } from '@actiontech/dms-kit';
814
import OAuth2 from '@actiontech/shared/lib/api/base/service/OAuth2';
915
import LoginLayout from '../Login/components/LoginLayout';
@@ -24,6 +30,8 @@ import {
2430
StorageKey,
2531
CompanyNoticeDisplayStatusEnum
2632
} from '@actiontech/dms-kit';
33+
import useSessionUser from '../../hooks/useSessionUser';
34+
import useNavigateToWorkbench from '../../hooks/useNavigateToWorkbench';
2735
const BindUser = () => {
2836
const navigate = useTypedNavigate();
2937
const { baseTheme } = useThemeStyleData();
@@ -35,28 +43,65 @@ const BindUser = () => {
3543
}, [extractQueries]);
3644
useBrowserVersionTips();
3745
const loginLock = useRef(false);
46+
47+
const { getSessionUserInfoAsync, getSessionUserSystemLoading } =
48+
useSessionUser();
49+
50+
const {
51+
navigateToWorkbenchAsync,
52+
getAvailabilityZoneTipsAsync,
53+
navigateToWorkbenchLoading,
54+
getAvailabilityZoneTipsLoading
55+
} = useNavigateToWorkbench();
56+
3857
const concatToken = (token = '') => {
3958
if (!token) {
4059
return '';
4160
}
4261
return `Bearer ${token}`;
4362
};
63+
4464
const navigateToTarget = useCallback(() => {
45-
const encodedTarget = urlParams?.target;
46-
if (encodedTarget) {
47-
const decoded = decodeURIComponent(encodedTarget);
48-
const [path, targetParams] = decoded.split('?');
49-
if (targetParams) {
50-
navigate(`${path}?${targetParams}`);
51-
} else if (path.endsWith('cloud-beaver')) {
52-
navigate(`${path}?${OPEN_CLOUD_BEAVER_URL_PARAM_NAME}=true`);
65+
dispatch(updateIsLoggingIn(true));
66+
getSessionUserInfoAsync().then((shouldNavigateToWorkbench) => {
67+
if (shouldNavigateToWorkbench) {
68+
// #if [ee]
69+
getAvailabilityZoneTipsAsync().then(() => {
70+
navigateToWorkbenchAsync().then(() => {
71+
dispatch(updateIsLoggingIn(false));
72+
});
73+
});
74+
// #else
75+
navigateToWorkbenchAsync().then(() => {
76+
dispatch(updateIsLoggingIn(false));
77+
});
78+
// #endif
5379
} else {
54-
navigate(path);
80+
const encodedTarget = urlParams?.target;
81+
if (encodedTarget) {
82+
const decoded = decodeURIComponent(encodedTarget);
83+
const [path, targetParams] = decoded.split('?');
84+
if (targetParams) {
85+
navigate(`${path}?${targetParams}`);
86+
} else if (path.endsWith('cloud-beaver')) {
87+
navigate(`${path}?${OPEN_CLOUD_BEAVER_URL_PARAM_NAME}=true`);
88+
} else {
89+
navigate(path);
90+
}
91+
} else {
92+
navigate(ROUTE_PATHS.BASE.HOME);
93+
}
94+
dispatch(updateIsLoggingIn(false));
5595
}
56-
} else {
57-
navigate(ROUTE_PATHS.BASE.HOME);
58-
}
59-
}, [navigate, urlParams]);
96+
});
97+
}, [
98+
dispatch,
99+
getSessionUserInfoAsync,
100+
getAvailabilityZoneTipsAsync,
101+
navigateToWorkbenchAsync,
102+
urlParams,
103+
navigate
104+
]);
60105
const login = (values: OauthLoginFormFields) => {
61106
const oauth2Token = urlParams?.oauth2_token;
62107
loginLock.current = true;
@@ -67,7 +112,13 @@ const BindUser = () => {
67112
duration: 0
68113
});
69114
loginLock.current = false;
70-
navigate(ROUTE_PATHS.BASE.LOGIN.index.path);
115+
// 使用startTransition的原因如下：
116+
// login 函数是表单的 onFinish 回调，属于同步用户交互事件
117+
// navigate 可能会触发懒加载组件（Suspense）
118+
// React 18 不允许在同步事件中直接触发 Suspense，否则会抛出错误
119+
startTransition(() => {
120+
navigate(ROUTE_PATHS.BASE.LOGIN.index.path);
121+
});
71122
return;
72123
}
73124
OAuth2.BindOauth2User({
@@ -134,9 +185,15 @@ const BindUser = () => {
134185
urlParams?.error,
135186
urlParams?.user_exist
136187
]);
188+
const isLoading =
189+
loginLock.current ||
190+
getSessionUserSystemLoading ||
191+
getAvailabilityZoneTipsLoading ||
192+
navigateToWorkbenchLoading;
193+
137194
return (
138195
<LoginLayout>
139-
<Form onFinish={login} disabled={loginLock.current}>
196+
<Form onFinish={login} disabled={isLoading}>
140197
<Form.Item
141198
name="username"
142199
rules={[
@@ -196,7 +253,7 @@ const BindUser = () => {
196253
block
197254
htmlType="submit"
198255
className="login-btn"
199-
loading={loginLock.current}
256+
loading={isLoading}
200257
>
201258
{t('dmsLogin.oauth.submitButton')}
202259
</BasicButton>

0 commit comments

Comments
 (0)