feat(front): 登录弹窗和注销登录

# Reviewed, transaction id: 8636
TencentBlueKing · Jun 6, 2024 · 398a86a · 398a86a
1 parent 956a74f
commit 398a86a
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 10 deletions.
diff --git a/web/README.md b/web/README.md
@@ -22,9 +22,10 @@ npm run build
 # 打包构建分析
 npm run build:analyzer
 ```
+// npm run doc 执行后无效，这里注释了
 
-## 详细说明
-
-```bash
-npm run doc
+# 补充说明，环境搭建
+1.dev.env.js中的LOCAL_DEV_URL:JSON.stringify('http://dev.xxx.com');// hosts配置 127.0.0.1 dev.xxx.com
+2.index-dev.html中const AJAX_URL_PREFIX = 'http://xxx.com/';
+1和2的xxx是一样的，2中的http://xxx.com要是能访问的线上环境（gsekit的测试环境，预发布环境等）
 ```
diff --git a/web/build/webpack.dev.conf.js b/web/build/webpack.dev.conf.js
@@ -57,6 +57,10 @@ const webpackConfig = merge(baseConf, {
             favicon: path.resolve(__dirname, '../src/assets/images/favicon.png'),
             chunksSortMode: 'none'
         }),
+        new HtmlWebpackPlugin({
+            filename: 'login_success.html',
+            template: 'login_success.html',
+        }),
 
         new FriendlyErrorsPlugin()
     ]

diff --git a/web/login_success.html b/web/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/web/package.json b/web/package.json
@@ -38,6 +38,7 @@
     },
     "dependencies": {
         "@blueking/bkcharts": "^2.0.10",
+        "@blueking/login-modal": "^1.0.5",
         "@icon-cool/bk-icon-gsekit": "0.0.9",
         "axios": "0.21.4",
         "bk-magic-vue": "2.2.14",

diff --git a/web/src/api/index.js b/web/src/api/index.js
@@ -12,6 +12,7 @@ import RequestQueue from './request-queue';
 import { messageError } from '@/common/bkmagic';
 import UrlParse from 'url-parse';
 import queryString from 'query-string';
+import { showLoginModal } from '@blueking/login-modal';
 
 // axios 实例
 const axiosInstance = axios.create({
@@ -185,12 +186,19 @@ function handleReject(error, config) {
     const nextError = { message: error.message, response: error.response };
     if (status === 401) {
       // 未登录, o.a 登录弹窗有问题先不做弹窗
-      let loginUrl = window.PROJECT_CONFIG.LOGIN_SERVICE_URL;
-      if (!loginUrl.includes('?')) {
-        loginUrl += '?';
+      const siteLoginUrl  = window.PROJECT_CONFIG.LOGIN_URL;
+      // 登录成功之后的回调地址，用于执行关闭登录窗口或刷新父窗口页面等动作
+      const successUrl = `${window.location.origin}/login_success.html`;
+      if (!siteLoginUrl) {
+        console.error('Login URL not configured!')
+        return
       }
-      const url = `${loginUrl}&c_url=${encodeURIComponent(window.location)}`;
-      window.location.assign(url);
+      const loginURL = new URL(siteLoginUrl);
+      loginURL.searchParams.set('c_url', successUrl);
+      const pathname = loginURL.pathname.endsWith('/') ? loginURL.pathname : `${loginURL.pathname}/`;
+      const loginUrl = `${loginURL.origin}${pathname}plain/${loginURL.search}`;
+      // 使用登录弹框登录
+      showLoginModal({ loginUrl });
     } else if (status === 500) {
       nextError.message = '系统出现异常';
     } else if (data && data.message) {

diff --git a/web/src/components/Header.vue b/web/src/components/Header.vue
@@ -140,7 +140,7 @@ export default {
     },
     handleLogout() {
       // location.assign('/console/accounts/logout/');
-      location.href = `${window.PROJECT_CONFIG.LOGIN_URL}?&c_url=${window.location}`;
+      location.href = `${window.PROJECT_CONFIG.LOGIN_URL}?c_url=${window.location}&is_from_logout=1`;
     },
     async resetAuthInfo() {
       const currentBiz = this.bizList.find(item => item.bk_biz_id === this.bizId);