feat(ui):auth setting (#310)

cmdb-ui/src/views/user/Login.vue

@@ -51,21 +51,32 @@
             class="login-button"
             :loading="state.loginBtn"
             :disabled="state.loginBtn"
-          >确定</a-button
+          >登录</a-button
           >
         </a-form-item>
       </a-form>
+      <template v-if="_enable_list && _enable_list.length >= 1">
+        <a-divider style="font-size:14px">其他登录方式</a-divider>
+        <div style="text-align:center">
+          <span v-for="(item, index) in _enable_list" :key="item.auth_type">
+            <ops-icon :type="item.auth_type"/>
+            <a @click="otherLogin(item.auth_type)">{{ item.auth_type }}</a>
+            <a-divider v-if="index < _enable_list.length - 1" type="vertical" />
+          </span>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script>
 import md5 from 'md5'
-import { mapActions } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 import { timeFix } from '@/utils/util'
 import appConfig from '@/config/app.js'
 
 export default {
+  name: 'Login',
   data() {
     return {
       customActiveKey: 'tab1',
@@ -84,9 +95,21 @@ export default {
       },
     }
   },
+  computed: {
+    ...mapState({ auth_enable: (state) => state?.user?.auth_enable ?? {} }),
+    enable_list() {
+      return this.auth_enable.enable_list ?? []
+    },
+    _enable_list() {
+      return this.enable_list.filter((en) => en.auth_type !== 'LDAP')
+    },
+  },
   created() {},
+  async mounted() {
+    await this.GetAuthDataEnable()
+  },
   methods: {
-    ...mapActions(['Login', 'Logout']),
+    ...mapActions(['Login', 'GetAuthDataEnable']),
     // handler
     handleUsernameOrEmail(rule, value, callback) {
       const { state } = this
@@ -118,7 +141,8 @@ export default {
           delete loginParams.username
           loginParams[!state.loginType ? 'email' : 'username'] = values.username
           loginParams.password = appConfig.useEncryption ? md5(values.password) : values.password
-          Login(loginParams)
+          localStorage.setItem('ops_auth_type', '')
+          Login({ userInfo: loginParams })
             .then((res) => this.loginSuccess(res))
             .finally(() => {
               state.loginBtn = false
@@ -130,10 +154,11 @@ export default {
         }
       })
     },
-
+    otherLogin(auth_type) {
+      this.Login({ userInfo: {}, auth_type })
+    },
     loginSuccess(res) {
-      console.log(res)
-      this.$router.push({ path: this.$route.query.redirect })
+      this.$router.push({ path: this.$route.query?.redirect ?? '/' })
       // 延迟 1 秒显示欢迎信息
       setTimeout(() => {
         this.$notification.success({

cmdb-ui/src/views/user/Logout.vue

@@ -1,23 +1,124 @@
 <template>
-  <h1>{{ msg }}</h1>
+  <div class="ops-logout">
+    <div
+      class="ops-logout-box"
+      v-if="_enable_list && _enable_list.length === 1 && time && !loading && !auth_auto_redirect"
+    >
+      <img src="../../assets/ops_logout.png" />
+      <p v-if="_enable_list && _enable_list.length">
+        <strong>您即将跳转至{{ _enable_list[0].auth_type }}</strong>
+      </p>
+      <p>
+        <span style="color:#2f54eb">{{ time }}</span>
+        秒后自动跳转
+      </p>
+      <a-space size="large">
+        <a-button type="primary" @click="handleConfirm">确认</a-button>
+        <a-button @click="handleCancel">取消</a-button>
+      </a-space>
+    </div>
+  </div>
 </template>
 
 <script>
-import config from '@/config/setting'
-import appConfig from '@/config/app'
-
+import { mapState, mapActions } from 'vuex'
 export default {
   name: 'Logout',
   data() {
     return {
-      msg: '正在退出，请稍后',
+      interval: null,
+      time: 5,
+      loading: false,
     }
   },
-  mounted() {
-    if (config.useSSO) {
-        window.location.href = appConfig.ssoLogoutURL
-    } else {
+  computed: {
+    ...mapState({ auth_enable: (state) => state?.user?.auth_enable ?? {} }),
+    enable_list() {
+      return this.auth_enable.enable_list ?? []
+    },
+    _enable_list() {
+      return this.enable_list.filter((en) => en.auth_type !== 'LDAP')
+    },
+    auth_auto_redirect() {
+      return this.auth_enable.auth_auto_redirect ?? 0
+    },
+  },
+  watch: {
+    time: {
+      immediate: true,
+      handler(newValue) {
+        if (!newValue) {
+          if (this.interval) {
+            clearInterval(this.interval)
+            this.interval = null
+          }
+          if (this._enable_list.length === 1) {
+            this.Login({ userInfo: {}, auth_type: this._enable_list[0].auth_type })
+          }
+        }
+      },
+    },
+  },
+  async mounted() {
+    this.loading = true
+    await this.GetAuthDataEnable()
+    this.loading = false
+    if (!this._enable_list.length || this._enable_list.length > 1) {
+      this.$router.push('/user/login')
     }
+    if (this.auth_auto_redirect) {
+      this.time = 0
+    } else {
+      this.time = 5
+    }
+    if (this.time) {
+      this.interval = setInterval(() => {
+        this.time--
+      }, 1000)
+    }
+  },
+  beforeDestroy() {
+    if (this.interval) {
+      clearInterval(this.interval)
+      this.interval = null
+    }
+  },
+  methods: {
+    ...mapActions(['Login', 'GetAuthDataEnable']),
+    handleConfirm() {
+      if (this._enable_list.length === 1) {
+        this.Login({ userInfo: {}, auth_type: this._enable_list[0].auth_type })
+      }
+    },
+    handleCancel() {
+      this.$router.push('/user/login')
+    },
   },
 }
 </script>
+
+<style lang="less" scoped>
+.ops-logout {
+  background-color: #f0f5ff;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .ops-logout-box {
+    width: 450px;
+    height: 275px;
+    border-radius: 12px;
+    background-color: #fff;
+    position: absolute;
+    left: 50%;
+    top: 30%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    img {
+      width: 80%;
+    }
+  }
+}
+</style>