登录小窗修改为使用window.open (#7889)

* feat: 登录小窗修改为使用window.open

* chore: 本地开发支持模拟检查token并跳转到登录页

* feat: 前置检查登录态未登录则跳转至登录页

.gitignore

@@ -14,3 +14,6 @@ src/web*/cmdb_*
 .vscode
 
 .pre-commit-config.yaml
+
+
+pre-*-bkcodeai

bkcodeai.json

@@ -0,0 +1,30 @@
+{
+  "crignore_file_patterns": [
+    "out/",
+    "dist/",
+    "assets/",
+    "images/",
+    "package.json",
+    "package-lock.json",
+    "yarn.lock",
+    ".env.*",
+    "*.env",
+    "*.map",
+    "*.yml",
+    "*.yaml",
+    "*.min.js",
+    "libs/",
+    "static/",
+    "doc/",
+    "docs/",
+    "*.mo",
+    "*.po",
+    "*.ini",
+    "*.toml",
+    "*.json",
+    "*.xml",
+    "*.lock",
+    "*.md",
+    "*.txt"
+  ]
+}

src/ui/builder/config/index.js

@@ -95,7 +95,9 @@ const dev = {
 
   useMock: false,
 
-  grabAPI: !!argv.grabapi
+  grabAPI: !!argv.grabapi,
+
+  checkToken: ''
 }
 
 const customDevConfigPath = path.resolve(__dirname, `index.dev.${argv.env || 'ee'}.js`)

src/ui/builder/webpack/devserver.js

@@ -13,6 +13,7 @@
 const path = require('path')
 const MockJS = require('mockjs')
 const bodyParser = require('body-parser')
+const cookieParser = require('cookie-parser');
 const { pathToRegexp } = require('path-to-regexp')
 
 const mock = require('../../mock/index')
@@ -27,6 +28,8 @@ module.exports = config => ({
     }
 
     if (config.dev.useMock) {
+      devServer.app.use(cookieParser())
+
       // parse application/x-www-form-urlencoded
       devServer.app.use(bodyParser.urlencoded({ extended: true }))
 

src/ui/package.json

@@ -16,8 +16,8 @@
     "lint-fix": "eslint --fix --ext .js,.vue ./src"
   },
   "dependencies": {
+    "@blueking/login-modal": "^1.0.0",
     "@blueking/notice-component-vue2": "^2.0.1-beta.2",
-    "@blueking/paas-login": "^0.0.11",
     "@blueking/user-selector": "^1.0.6",
     "@icon-cool/bk-icon-cmdb-colorful": "0.0.1",
     "await-to-js": "^3.0.0",
@@ -87,6 +87,7 @@
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
     "chalk": "^4.1.0",
+    "cookie-parser": "^1.4.6",
     "copy-webpack-plugin": "^8.1.1",
     "cross-env": "^7.0.3",
     "crypto-browserify": "^3.12.0",

src/ui/src/App.vue

@@ -26,18 +26,12 @@
     <the-header></the-header>
     <router-view class="views-layout" :name="topView" ref="topView"></router-view>
     <the-permission-modal ref="permissionModal"></the-permission-modal>
-    <the-login-modal ref="loginModal"
-      v-if="loginUrl"
-      :login-url="loginUrl"
-      :success-url="loginSuccessUrl">
-    </the-login-modal>
   </div>
 </template>
 
 <script>
   import theHeader from '@/components/layout/header'
   import thePermissionModal from '@/components/modal/permission'
-  import theLoginModal from '@blueking/paas-login'
   import theNotice from '@/components/notice'
   import { addResizeListener, removeResizeListener } from '@/utils/resize-events'
   import { MENU_INDEX } from '@/dictionary/menu-symbol'
@@ -47,14 +41,12 @@
     components: {
       theNotice,
       theHeader,
-      thePermissionModal,
-      theLoginModal
+      thePermissionModal
     },
     data() {
       const showBrowserTips = window.navigator.userAgent.toLowerCase().indexOf('chrome') === -1
       return {
         showBrowserTips,
-        loginSuccessUrl: `${window.location.origin}/static/login_success.html`,
         showNotice: false,
         noticeHeight: 0
       }
@@ -72,14 +64,6 @@
         const [topRoute] = this.$route.matched
         return (topRoute && topRoute.meta.view) || 'default'
       },
-      loginUrl() {
-        const siteLoginUrl = this.$Site.login || ''
-        const [loginBaseUrl] = siteLoginUrl.split('?')
-        if (loginBaseUrl) {
-          return `${loginBaseUrl}plain/`
-        }
-        return ''
-      },
       enableNotice() {
         if (window.Site.enableNotification === false) {
           return false
@@ -95,7 +79,6 @@
     mounted() {
       addResizeListener(this.$el, this.calculateAppHeight)
       window.permissionModal = this.$refs.permissionModal
-      window.loginModal = this.$refs.loginModal
 
       // 在body标签添加语言标识属性，用于插入到body下的内容进行国际化处理
       document.body.setAttribute('lang', this.$i18n.locale)

src/ui/src/api/index.js

@@ -12,11 +12,12 @@
 
 import Axios from 'axios'
 import md5 from 'md5'
-import CachedPromise from './_cached-promise'
-import RequestQueue from './_request-queue'
+import has from 'has'
 import { $error } from '@/magicbox'
 import i18n, { language } from '@/i18n'
-import has from 'has'
+import { showLoginModal } from '@blueking/login-modal'
+import CachedPromise from './_cached-promise'
+import RequestQueue from './_request-queue'
 import customHeaders from './custom-header'
 
 // axios实例
@@ -185,12 +186,18 @@ function handleReject(error, config) {
     const { status, data } = error.response
     const nextError = { message: error.message, status }
     if (status === 401) {
-      if (window.loginModal) {
-        window.loginModal.show()
-      } else {
-        // 接口401需要拿html中定义的Site
-        window.Site.login && (window.location.href = window.Site.login)
+      const successUrl = `${window.location.origin}/static/login_success.html`
+
+      const siteLoginUrl = window.Site.login || ''
+      if (!siteLoginUrl) {
+        console.error('Login URL not configured!')
+        return
       }
+
+      const [loginBaseUrl] = siteLoginUrl.split('?')
+      const loginUrl = `${loginBaseUrl}plain?c_url=${encodeURIComponent(successUrl)}`
+
+      showLoginModal({ loginUrl })
     } else if (data && data.bk_error_msg) {
       nextError.message = data.bk_error_msg
     } else if (status === 403) {

src/ui/src/main.js

@@ -47,6 +47,7 @@ Vue.prototype.$http = api
 Vue.prototype.$tools = tools
 Vue.prototype.$routerActions = routerActions
 
+api.get(`${window.API_HOST}is_login`).then(() => {
   window.CMDB_APP = new Vue({
     el: '#app',
     router,
@@ -55,6 +56,20 @@ window.CMDB_APP = new Vue({
     components: { App },
     template: '<App/>'
   })
+})
+  .catch(() => {
+    if (!window.Site.login) {
+      console.error('The login URL is not configured!')
+      return
+    }
+    try {
+      const loginURL = new URL(window.Site.login)
+      loginURL.searchParams.set('c_url', location.href)
+      location.href = loginURL.href
+    } catch (_) {
+      console.error('The login URL invalid!')
+    }
+  })
 
 if (process.env.COMMIT_ID) {
   window.CMDB_COMMIT_ID = process.env.COMMIT_ID

src/ui/static/login_success.html

@@ -14,10 +14,11 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Document</title>
+    <title>Login Success</title>
 </head>
 <script>
-    window.parent.location.reload()
+    window.opener && window.opener.location.reload()
+    window.close()
 </script>
 <body>
 </body>