feat: 统一前端登录弹窗

# Reviewed, transaction id: 8151
Huayeaaa · May 17, 2024 · 853ad5e · 853ad5e
1 parent 33a7ad4
commit 853ad5e
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 18 deletions.
diff --git a/frontend/build/webpack.base.conf.ts b/frontend/build/webpack.base.conf.ts
@@ -179,6 +179,12 @@ const baseConfig: webpack.Configuration = {
         from: resolve('static/images'),
         to: resolve('dist/static/images'),
         toType: 'dir'
+      },
+      // 成功登录页面构建
+      {
+        from: resolve('./login_success.html'),
+        to: `${config.build.assetsRoot}/login_success.html`,
+        toType: 'file'
       }]
     }),
     new ProgressBarPlugin({

diff --git a/frontend/build/webpack.dev.conf.ts b/frontend/build/webpack.dev.conf.ts
@@ -177,6 +177,12 @@ const webpackConfig = merge(baseConf, {
             inject: true
         }),
 
+        new HtmlWebpackPlugin({
+            filename: 'login_success.html',
+            template: 'login_success.html',
+            inject: true
+        }),
+
         // new AnalyzerPlugin.BundleAnalyzerPlugin()
         // new FriendlyErrorsPlugin()
     ]

diff --git a/frontend/login_success.html b/frontend/login_success.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>登录成功</title>
+</head>
+<script>
+    window.opener && window.opener.location.reload()
+    window.close()
+</script>
+<body>
+</body>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -44,6 +44,7 @@
   "dependencies": {
     "@blueking/crypto-js-sdk": "0.0.4",
     "@blueking/ip-selector": "0.2.0-beta",
+    "@blueking/login-modal": "^1.0.1",
     "@blueking/notice-component-vue2": "~2.0.1",
     "@blueking/paas-login": "0.0.9",
     "@icon-cool/bk-icon-node-manager": "latest",

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -24,6 +24,7 @@ import { IAuthApply, IBkBiz } from '@/types/index';
 import BkPaasLogin from '@blueking/paas-login/dist/paas-login.umd';
 import NoticeComponent from '@blueking/notice-component-vue2';
 import '@blueking/notice-component-vue2/dist/style.css';
+import { showLoginModal } from '@blueking/login-modal';
 
 @Component({
   name: 'app',
@@ -96,30 +97,28 @@ export default class App extends Vue {
   private mounted() {
     window.LoginModal = this.$refs.login;
     bus.$on('show-login-modal', () => {
+      // static_url： '/static/' or '/'
+      const static_url = window.PROJECT_CONFIG?.STATIC_URL ? window.PROJECT_CONFIG.STATIC_URL : '/';
+      // 登录成功之后的回调地址，用于执行关闭登录窗口或刷新父窗口页面等动作
+      const successUrl = `${window.location.origin}${static_url}login_success.html`;
       const { href, protocol } = window.location;
+      let loginUrl = '';
       if (process.env.NODE_ENV === 'development') {
-        window.location.href = LOGIN_DEV_URL + href;
+        // 本地登录地址不需要bknodeman前缀
+        loginUrl = LOGIN_DEV_URL.replace('bknodeman.','') + encodeURIComponent(successUrl);
       } else {
-        // 目前仅ieod取消登录弹框
-        // if (window.PROJECT_CONFIG.RUN_VER === 'ieod') {
-        let loginUrl = window.PROJECT_CONFIG.LOGIN_URL;
+        loginUrl = window.PROJECT_CONFIG.LOGIN_URL;
         if (!/http(s)?:\/\//.test(loginUrl)) {
           loginUrl = `${protocol}//${loginUrl}`;
         }
-        if (!loginUrl.includes('?')) {
-          loginUrl += '?';
-        }
-        window.location.href = `${loginUrl}&c_url=${encodeURIComponent(href)}`;
-        // } else {
-        //   const res = data?.data || {};
-        //   if (res.has_plain) {
-        //     MainStore.setLoginUrl(res.login_url);
-        //     window.LoginModal && window.LoginModal.show();
-        //   } else {
-        //     window.location.href = res.login_url ? res.login_url : (LOGIN_DEV_URL + href);
-        //   }
-        // }
       }
+      // 处理登录地址为登录小窗需要的格式，主要是设置c_url参数
+      const loginURL = new URL(loginUrl);
+      loginURL.searchParams.set('c_url', successUrl);
+      const pathname = loginURL.pathname.endsWith('/') ? loginURL.pathname : `${loginURL.pathname}/`;
+      loginUrl = `${loginURL.origin}${pathname}plain/${loginURL.search}`;
+      // 使用登录弹框登录
+      showLoginModal({ loginUrl });
     });
     bus.$on('show-permission-modal', (data: { trigger: 'request' | 'click', params: IAuthApply }) => {
       this.permissionModal.show(data);

diff --git a/frontend/src/components/common/navigation.vue b/frontend/src/components/common/navigation.vue
@@ -132,6 +132,7 @@ import ExceptionPage from '@/components/exception/exception-page.vue';
 import routerBackMixin from '@/common/router-back-mixin';
 import { bus } from '@/common/bus';
 import { INavConfig } from '@/types';
+import { showLoginModal } from '@blueking/login-modal';
 
 interface IUserItem {
   id: string
@@ -369,7 +370,11 @@ export default class NodemanNavigation extends Mixins(routerBackMixin) {
   private async handleUser(userItem: IUserItem) {
     if (userItem.id === 'LOGOUT') {
       if (NODE_ENV === 'development') {
-        window.location.href = LOGIN_DEV_URL + window.location.href;
+        const successUrl = `${window.location.origin}/login_success.html`;
+        // 不需要bknodeman前缀
+        const loginUrl = LOGIN_DEV_URL.replace('bknodeman.','') + encodeURIComponent(successUrl);
+        // 使用登录弹框登录
+        showLoginModal({ loginUrl });
       } else {
         this.$http.get?.(`${window.PROJECT_CONFIG.SITE_URL}logout/`);
         // window.location.href = `${window.PROJECT_CONFIG.BK_PAAS_HOST}/console/accounts/logout/`;

diff --git a/static/login_success.html b/static/login_success.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>登录成功</title>
+</head>
+<script>
+    window.opener && window.opener.location.reload()
+    window.close()
+</script>
+<body>
+</body>
+</html>