adspecs 0.1.12

package/references/web-ui/src/views/authorize/components/FormLogin/index.vue

@@ -0,0 +1,649 @@
+<template>
+  <div class="login-form-login">
+    <!-- 账号密码登录表单 -->
+    <el-form
+      class="login-form"
+      ref="loginForm"
+      autocomplete="off"
+      @submit.prevent
+      :model="loginForm"
+      :rules="rules"
+      @keydown.enter="onSubmit"
+    >
+      <!-- 登录账号 -->
+      <el-form-item label prop="userName">
+        <el-input
+          v-model.trim="loginForm.userName"
+          clearable
+          @blur="blurCheckCaptcha"
+          :placeholder="$t(`login.${loginMode.mode.placeholder}`)"
+        >
+          <template v-slot:prefix>
+            <i :class="loginMode.mode.icon" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <!-- 登录密码 -->
+      <el-form-item label prop="password" v-if="loginMode.mode.type !== 'message'">
+        <el-input type="password" v-model.trim="loginForm.password" :placeholder="$t('login.passwordPlaceholder')">
+          <template v-slot:prefix>
+            <i class="iconfont1 icon-mima" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <!-- 短信验证码 -->
+      <el-form-item label prop="validatorCode" v-if="isValidatorCode">
+        <div class="sms-item">
+          <el-input v-model.trim="loginForm.validatorCode" :placeholder="$t('login.smsVerifyCode')">
+            <el-icon><el-icon-message /></el-icon>
+          </el-input>
+          <el-button type="primary" @click="sendCode" :disabled="!smsCodeObj.canClick">{{ smsText }}</el-button>
+        </div>
+      </el-form-item>
+      <!-- 图片验证码 -->
+      <el-form-item label v-show="checkCaptcha" prop="captcha">
+        <el-input v-model.trim="loginForm.captcha" :placeholder="$t('login.verificationCode')">
+          <template v-slot:prefix>
+            <i class="iconfont1 icon-yanzhengma" />
+          </template>
+          <template v-slot:suffix>
+            <img class="code-img" :src="identifyCode" alt @click="getCaptcha(loginForm.userName)" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <!-- 账号密码登录表单按钮 -->
+      <el-form-item class="login-btn-item">
+        <el-button type="primary" @click="onSubmit" :loading="loginLoading">{{ $t('login.login') }}</el-button>
+      </el-form-item>
+      <!-- 短信/邮箱验证码弹出框 -->
+      <verification-dialog v-bind="verificationObj" ref="verification-dialog" :send-code="sendCode" @update-form="updateForm" />
+    </el-form>
+    <!-- 切换登录方式 -->
+    <!-- 只有一种登录方式时隐藏 -->
+    <div v-show="loginMode.list.length > 1" class="login-mode">
+      <div v-for="(item, index) in loginModeList" :key="item.type">
+        <el-divider v-if="index" direction="vertical"></el-divider>
+        <el-link :type="item.selected ? 'primary' : 'default'" :underline="false" @click="changeLoginMode(item.type)">{{
+          item.label
+        }}</el-link>
+      </div>
+      <div v-if="loginMode.list.length > 3">
+        <el-divider direction="vertical" />
+        <el-dropdown placement="bottom" trigger="click" style="display: inline-block;" @command="changeLoginMode">
+          <el-link type="default" :underline="false">
+            {{ $t('button.more') }}
+            <el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
+          </el-link>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item in loginMode.list.slice(3)" :command="item.type" :key="item.type">
+                {{ item.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+    <!-- 切换中英文以及忘记密码 -->
+    <slot name="forgetPwd" />
+  </div>
+</template>
+
+<script>
+import { Message as ElIconMessage, ArrowDown as ElIconArrowDown, } from '@element-plus/icons-vue'
+// vuex
+import { mapMutations } from '@/store/piniaToVuex'
+// api
+import { getPreCaptcha, getLoginType, oidcLogin, oauth2Login, sendSsoValidatorCode, sendSsoEmailValidatorCode } from '@/api/login'
+// base64 auth
+import { encode } from '@/utils/base64'
+import { getToken, setToken } from '@/utils/auth'
+// 组件
+import VerificationDialog from './components/VerificationDialog'
+
+export default {
+  components: {
+    VerificationDialog,
+    ElIconMessage,
+    ElIconArrowDown
+  },
+  name: 'FormLogin',
+  props: {
+    showPage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // 定时器
+      clock: undefined,
+      //  验证码弹出框提示信息
+      verificationMsg: '',
+      // 登录配置数据
+      loginObj: {
+        // 双因认证类型
+        ftaType: '',
+        // 可用登录模式
+        loginTypes: [],
+        // 登录协议
+        protocolType: '',
+        // 租户id
+        tenantId: 0
+      },
+      // 密码登录提交Loading
+      loginLoading: false,
+      // 密码登录表单
+      loginForm: {
+        // 登录名称
+        userName: '',
+        // 登录密码
+        password: '',
+        //
+        userType: '86',
+        // 图片认证
+        captcha: '',
+        // 短信验证码
+        validatorCode: ''
+      },
+      // 密码登录验证码标识
+      checkCaptcha: false,
+      // 图片验证码地址
+      identifyCode: '',
+      /**
+       * 登录方式种类
+       * loginType: 1 手机号登录, 2 邮箱登录, 3 账号登录, 4 手机号+短信验证码登录
+       */
+      // 登录方式种类
+      modeList: [
+        // 手机号登录
+        {
+          // 名称
+          label: this.$t('login.phone'),
+          // 类型
+          type: 'phone',
+          // 图标
+          icon: 'el-icon-phone',
+          // 提示（没有输入时）
+          tip: 'phoneWarning',
+          // 校验正则
+          regular: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+          // 正则提示
+          regularTip: 'phoneError',
+          // 是否选中
+          selected: true,
+          // 登录类型（接口提交用）
+          loginType: 1,
+          // 输入框的placeholder
+          placeholder: 'phonePlaceholder'
+        },
+        // 账号登录
+        {
+          label: this.$t('login.account'),
+          type: 'account',
+          icon: 'el-icon-user-solid',
+          tip: 'accEmpty',
+          selected: false,
+          loginType: 3,
+          placeholder: 'accPlaceholder'
+        },
+        // 邮箱登录
+        {
+          label: this.$t('login.email'),
+          type: 'email',
+          icon: 'el-icon-message',
+          tip: 'mailEmpty',
+          regular: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/,
+          regularTip: 'mailError',
+          selected: false,
+          loginType: 2,
+          placeholder: 'mailPlaceholder'
+        },
+        // 短信验证码登录
+        {
+          label: this.$t('login.message'),
+          type: 'message',
+          icon: 'el-icon-phone',
+          tip: 'phoneWarning',
+          regular: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+          regularTip: 'phoneError',
+          selected: false,
+          loginType: 4,
+          placeholder: 'phonePlaceholder'
+        },
+        // 域控登录
+        {
+          label: this.$t('login.ad_domain'),
+          type: 'ad_domain',
+          icon: 'user-solid',
+          tip: 'accEmpty',
+          selected: false,
+          loginType: 5,
+          placeholder: 'adPlaceholder',
+        },
+      ],
+      // 发送短信验证码按钮提示
+      smsCodeObj: {
+        // 是否可点击
+        canClick: true,
+        // 按钮展示名称
+        getCodeText: this.$t('login.sendCode'),
+        // 重新获取短信验证码时间
+        totalTime: 60,
+        // 按钮状态
+        type: 'ready'
+      }
+    }
+  },
+  computed: {
+    // 验证码弹出框数据
+    verificationObj() {
+      return {
+        ...this.smsCodeObj,
+        ...this.loginForm,
+        ...this.loginMode,
+        ...this.loginObj,
+        verificationMsg: this.verificationMsg
+      }
+    },
+    // 是否展示短信验证码
+    isValidatorCode() {
+      const { type } = this.loginMode.mode
+      return type === 'message'
+    },
+    // 密码登录验证规则
+    rules() {
+      const validateUserName = (rule, value, callback) => {
+        const mode = this.loginMode.mode
+        if (value === '') {
+          callback(new Error(this.$t(`login.${mode.tip}`)))
+        } else if (mode.regular && !mode.regular.test(value)) {
+          callback(new Error(this.$t(`login.${mode.regularTip}`)))
+        } else {
+          callback()
+        }
+      }
+      return {
+        userName: [{ trigger: 'blur', validator: validateUserName }],
+        password: [
+          {
+            required: true,
+            message: this.$t('login.pwdEmpty'),
+            trigger: 'blur'
+          }
+        ],
+        captcha: [
+          {
+            required: this.checkCaptcha,
+            message: this.$t('login.verifyCodeWarning'),
+            trigger: 'blur'
+          }
+        ],
+        validatorCode: [
+          {
+            required: true,
+            message: this.$t('login.verifyCodeWarning'),
+            trigger: 'blur'
+          }
+        ]
+      }
+    },
+    /**
+     * list: 登录模式循环列表(tab切换列表)
+     * mode: 当前选中的登录模式
+     */
+    loginMode() {
+      const locale = this.$i18n.locale
+      const modeList =
+        locale &&
+        this.modeList.map(e => {
+          return {
+            ...e,
+            label: this.$t(`login.${e.type}`)
+          }
+        })
+      return {
+        list: modeList,
+        mode: modeList.find(e => e.selected)
+      }
+    },
+    loginModeList() {
+      return this.loginMode.list.slice(0, 3)
+    },
+    /**
+     * 按钮文字根据状态改变
+     * type 按钮当前状态
+     */
+    smsText() {
+      const { totalTime, type } = this.smsCodeObj
+      if (type === 'start') {
+        return totalTime + this.$t('login.resend')
+      }
+      if (type === 'again') {
+        return this.$t('login.resendSMSCode')
+      }
+      return this.$t('login.sendCode')
+    }
+  },
+  methods: {
+    ...mapMutations(['SET_TENANTID', 'SET_USERLIMIT', 'SET_USERID']),
+
+    // 重置发送短信验证码按钮数据
+    resetSMSCodeObj() {
+      this.smsCodeObj = {
+        // 是否可点击
+        canClick: true,
+        // 按钮展示名称
+        getCodeText: this.$t('login.sendCode'),
+        // 重新获取短信验证码时间
+        totalTime: 60,
+        // 按钮状态
+        type: 'ready'
+      }
+    },
+    // 表单更新回调
+    updateForm(key, value) {
+      this.loginForm[key] = value
+    },
+
+    // 短信验证码倒计时
+    verificationCode() {
+      if (!this.smsCodeObj.canClick) return
+      window.clearInterval(this.clock)
+      // 倒数开始
+      this.smsCodeObj.type = 'start'
+      this.smsCodeObj.canClick = false
+
+      this.clock = window.setInterval(() => {
+        this.smsCodeObj.totalTime--
+
+        // 倒数结束
+        if (this.smsCodeObj.totalTime < 0) {
+          window.clearInterval(this.clock)
+          this.smsCodeObj.type = 'again'
+          this.smsCodeObj.totalTime = 60
+          this.smsCodeObj.canClick = true
+        }
+      }, 1000)
+    },
+
+    // 发送短信验证码
+    async sendCode() {
+      const valid = await this.$refs.loginForm.validateField('userName')
+      if (!valid) {
+        let { loginType } = this.loginMode.mode
+
+        const params = {
+          loginAccount: this.loginForm.userName,
+          loginType: ''
+        }
+
+        let response = {}
+
+        if (loginType === 4) {
+          response = await sendSsoValidatorCode(params)
+        } else {
+          // 判断验证码类型 oidc/ oauth2
+          if (this.loginObj.ftaType === 'pwd2PhoneCode') {
+            response = await sendSsoValidatorCode(params)
+          } else {
+            response = await sendSsoEmailValidatorCode(params)
+          }
+        }
+        if (this.reqIsSucceed(response)) {
+          this.$message.success(response.msg)
+          this.verificationCode()
+        }
+      }
+    },
+
+    // 改变登录模式
+    changeLoginMode(type) {
+      this.modeList = this.modeList.map(e => {
+        return {
+          ...e,
+          selected: e.type === type ? true : false
+        }
+      })
+      // 重置表单
+      this.$refs.loginForm.resetFields()
+      this.loginForm = {
+        userName: '',
+        password: '',
+        userType: '86',
+        captcha: '',
+        validatorCode: ''
+      }
+      // 重置验证码数据
+      this.resetSMSCodeObj()
+    },
+
+    // 登录表单验证
+    async onSubmit() {
+      // 表单校验提交
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loginLoading = true
+          // 有没有图片校验
+          if (this.checkCaptcha) {
+            this.handleSubmit()
+          } else {
+            // 是否超过输入密码次数
+            getPreCaptcha(this.loginForm.userName)
+              .then(res => {
+                if (res.data) {
+                  this.checkCaptcha = true
+                  this.loginLoading = false
+                  this.getCaptcha(this.loginForm.userName)
+                } else {
+                  this.handleSubmit()
+                }
+              })
+              .catch(() => {
+                this.loginLoading = false
+              })
+          }
+        }
+      })
+    },
+
+    // url地址拼接
+    setUrlQuery(options) {
+      let { url, query } = options
+      // 没有地址返回空字符
+      if (!url) return ''
+      // 判断是否有数据
+      if (url.indexOf('?') !== -1) {
+        url = `${url}&${query}`
+      } else {
+        url = `${url}?${query}`
+      }
+      return url
+    },
+
+    // 登录表单提交
+    async handleSubmit(token = '') {
+      try {
+        const { type } = this.smsCodeObj
+        const { visible } = this.$refs['verification-dialog']
+        let { loginType } = this.loginMode.mode
+        // 控制只发送一次请求登录接口
+        // 短信登录跳过判断
+        if (type === 'start' && visible === false && loginType !== 4) {
+          this.$refs['verification-dialog'].visible = true
+          this.loginLoading = false
+          return
+        }
+
+        const { response_type, client_id, redirect_uri, scope, state } = this.$route.query
+        let { userName, password, captcha, validatorCode } = this.loginForm
+        let params = {
+          params: {
+            username: userName,
+            password: encode(password),
+            captcha,
+            verification_code: validatorCode,
+            login_type: token ? 5 : loginType,
+            systemCode: _config.systemCode,
+            loginFrom: 'PC',
+            response_type,
+            redirect_uri,
+            client_id,
+            scope,
+            state
+          }
+        }
+
+        let response = {}
+        // 请求之前重新设置一次token
+        if (token) {
+          setToken(token)
+        }
+        // 判断登录类型 oidc/ oauth2
+        response = this.loginObj.protocolType === 'oidc' ? await oidcLogin(params) : await oauth2Login(params)
+        this.loginLoading = false
+        if (this.reqIsSucceed(response) && response.data) {
+          const {
+            data,
+            data: { code, accessToken, refreshToken }
+          } = response
+          // 判断是否弹窗
+          if (code && code === 700) {
+            this.verificationCode()
+            this.verificationMsg = response.msg
+            this.$refs['verification-dialog'].visible = true
+          }
+          // 登录成功
+          if (this.reqIsSucceed(data)) {
+            // 如果有设置路径token
+            if (accessToken && refreshToken) {
+              setToken(accessToken, refreshToken)
+            }
+
+            // 设置路径参数
+            const url = this.setUrlQuery({
+              url: data.redirectUrl,
+              query: data.urlParams
+            })
+            if (url) {
+              location.href = url
+            }
+          }
+        } else {
+          if (this.checkCaptcha) this.getCaptcha(userName)
+          this.$emit('update:showPage', true)
+        }
+      } catch (error) {
+        this.$emit('update:showPage', true)
+        this.loginLoading = false
+      }
+    },
+
+    // 检查是否需要开启密码登录验证码
+    blurCheckCaptcha() {
+      getPreCaptcha(this.loginForm.userName).then(res => {
+        this.checkCaptcha = res.data
+        if (res.data) this.getCaptcha(this.loginForm.userName)
+      })
+      // 重置验证码数据
+      this.resetSMSCodeObj()
+    },
+    // 获取验证码图片地址
+    getCaptcha(phone) {
+      this.identifyCode = `${window.VUE_APP_SERVERAPI}api/base/base-pa/imageCaptcha?phone=${phone}&${Math.random()}`
+    }
+  },
+  mounted() {
+    document.title = '谷神统一认证平台'
+    // 获取配置
+    const { client_id } = this.$route.query
+    const params = {
+      appId: client_id
+    }
+    getLoginType(params)
+      .then(res => {
+        if (this.reqIsSucceed(res)) {
+          const { loginTypes } = res.data
+          // 登录状态
+          this.loginObj = {
+            ...this.loginObj,
+            ...res.data
+          }
+          // 登陆方式重新赋值
+          this.modeList = this.modeList
+            .filter(e => {
+              // 根据接口的登录方式过滤
+              const mode = loginTypes.find(item => {
+                return e.loginType === Number(item.code)
+              })
+              return !!mode
+            })
+            .map((e, i) => {
+              return {
+                ...e,
+                // 默认展示首位
+                selected: i === 0
+              }
+            })
+          // 获取浏览器里的token 和租户id
+          const token = getToken()
+        
+          if (token) {
+            this.handleSubmit(token)
+          } else {
+            this.$emit('update:showPage', true)
+          }
+        } else {
+          // 无法获取配置信息或者接口报错跳转404
+          this.$router.replace('/404')
+        }
+      })
+      .catch(() => {
+        // 无法获取配置信息或者接口报错跳转404
+        this.$router.replace('/404')
+      })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.login-form-login {
+  .login-form {
+    .el-button {
+      width: 100%;
+    }
+    .code-img {
+      cursor: pointer;
+      height: 38px;
+      position: relative;
+      top: -2px;
+      right: -5px;
+      border-radius: 0px 4px 4px 0;
+    }
+    .el-button {
+      margin: 10px 0 0 0;
+    }
+    .login-btn-item {
+      margin-bottom: 15px;
+    }
+    .sms-item {
+      display: flex;
+      .el-input {
+        flex: 2;
+      }
+      .el-button {
+        flex: 1;
+        margin: 0 0 0 10px;
+      }
+    }
+  }
+}
+.login-mode {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 15px;
+}
+:deep(.el-dropdown) {
+  line-height: inherit;
+}
+</style>