n20-common-lib 1.1.98

package/src/components/LoginTemporary/form.vue

@@ -0,0 +1,511 @@
+<template>
+  <!-- eslint-disable no-irregular-whitespace -->
+  <div v-loading="loadingV" class="login-form-wrap p-a">
+    <slot name="header"></slot>
+    <svg class="cut-qrcode-h">
+      <image
+        v-if="theType === 'qrcode'"
+        width="52"
+        height="52"
+        xlink:href="./qrt.png"
+      />
+      <image v-else width="52" height="52" xlink:href="./qr.png" />
+      <path d="M0,0L52,0L52,52Z" @click="cutQrcode" />
+    </svg>
+    <!-- 账号/密码登录 -->
+    <div v-if="theType === 'account'">
+      <el-form
+        ref="login-form"
+        :model="form"
+        :rules="rules"
+        :hide-required-asterisk="true"
+        @submit.native.prevent="submitLogin"
+      >
+        <el-form-item label="帐号" prop="username">
+          <el-input v-model="form.username" placeholder="请输入账号" />
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input
+            v-model="form.password"
+            placeholder="请输入密码"
+            show-password
+          />
+          <!-- 不自动填充密码
+          <input
+            v-model="fakePwd"
+            type="password"
+            name="password"
+            hidden="hidden"
+            @change="fakePwd = 'a1b2c3d4'"
+          />
+          <el-input
+            v-model="form.password"
+            placeholder="请输入密码"
+            :class="{ 'login-password': !showPwd }"
+          >
+            <i
+              slot="suffix"
+              class="el-input__icon el-icon-view"
+              style="pointer-events: all"
+              @click.stop="showPwd = !showPwd"
+            ></i>
+          </el-input>
+          不自动填充密码End -->
+        </el-form-item>
+        <el-button
+          class="m-t"
+          type="primary"
+          native-type="submit"
+          style="width: 100%"
+          >登　录</el-button
+        >
+      </el-form>
+    </div>
+    <!-- 二维码扫码登录 -->
+    <qrCode v-else-if="theType === 'qrcode'" @qrcode-login="QrcodeLogin" />
+    <!-- 手机验证码登录 -->
+    <div v-if="theType === 'pthon'">
+      <el-form
+        ref="login-form"
+        :model="form"
+        :rules="rules"
+        :hide-required-asterisk="true"
+        @submit.native.prevent="submitLogin"
+      >
+        <el-form-item label="手机号" prop="phone">
+          <el-input v-model="form.phone" placeholder="请输入手机号" />
+        </el-form-item>
+        <el-form-item label="验证码" prop="code">
+          <br />
+          <div class="flex-box">
+            <el-input
+              v-model="form.code"
+              class="flex-item m-r-s"
+              placeholder="请输入验证码"
+            />
+            <el-button
+              plain
+              style="4em"
+              :disabled="!form.phone || codeNum !== '验证码'"
+              @click="sendMsg('phone', '手机号')"
+              >{{ codeNum }}</el-button
+            >
+          </div>
+        </el-form-item>
+        <el-button
+          class="m-t"
+          type="primary"
+          native-type="submit"
+          style="width: 100%"
+          >登　录</el-button
+        >
+      </el-form>
+    </div>
+    <!-- 账户密码验证码登录 -->
+    <div v-if="theType === 'accountPthon'">
+      <el-form
+        ref="login-form"
+        :model="form"
+        :rules="rules"
+        :hide-required-asterisk="true"
+        @submit.native.prevent="submitLogin"
+      >
+        <el-form-item label="帐号" prop="username">
+          <el-input v-model="form.username" placeholder="请输入账号" />
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input
+            v-model="form.password"
+            placeholder="请输入密码"
+            show-password
+          />
+        </el-form-item>
+        <el-form-item label="验证码" prop="code">
+          <br />
+          <div class="flex-box">
+            <el-input
+              v-model="form.code"
+              class="flex-item m-r-s"
+              placeholder="请输入验证码"
+            />
+            <el-button
+              plain
+              style="4em"
+              :disabled="!form.username || codeNum !== '验证码'"
+              @click="sendMsg('username', '账户')"
+              >{{ codeNum }}</el-button
+            >
+          </div>
+        </el-form-item>
+        <el-button
+          class="m-t"
+          type="primary"
+          native-type="submit"
+          style="width: 100%"
+          >登　录</el-button
+        >
+      </el-form>
+    </div>
+    <!--  -->
+    <div v-if="theType !== 'qrcode'" class="flex-box flex-lr m-t-s m-b-s">
+      <el-dropdown
+        size="mini"
+        placement="bottom-start"
+        @command="changeLoginType"
+      >
+        <span>其他登录方式</span>
+        <el-dropdown-menu slot="dropdown">
+          <template v-for="item in loginTypes">
+            <el-dropdown-item
+              v-if="item !== theType"
+              :key="item"
+              :command="item"
+              >{{ loginTypeMap[item] }}</el-dropdown-item
+            >
+          </template>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <el-link :underline="false" @click="forgetPw">忘记密码</el-link>
+    </div>
+    <slot name="footer"></slot>
+
+    <el-dialog :visible.sync="fPwV" title="找回密码" width="460px">
+      <retrievePw :visible.sync="fPwV" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import axios from '../../utils/axios'
+import auth from '../../utils/auth'
+import qrCode from './qrcode.vue'
+import { siteTree2menus, siteTree2RelaNos } from './utils'
+import retrievePw from './retrievePw.vue'
+
+function encode(pwd = '', key = 0) {
+  if (pwd === '') return ''
+
+  let pwdArr = pwd.trim().split('')
+  let resultArr = pwdArr.map((oPwd) =>
+    String.fromCharCode(oPwd.charCodeAt() ^ key)
+  )
+  let result = resultArr.join('')
+
+  return window.btoa(window.unescape(window.encodeURIComponent(result)))
+}
+
+export default {
+  name: 'LoginForm',
+  components: {
+    qrCode,
+    retrievePw
+  },
+  props: {
+    loginTypes: {
+      type: Array,
+      default: () => ['account']
+    },
+    loginThen: {
+      type: Function,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      showPwd: false,
+      fakePwd: 'a1b2c3d4',
+      loadingV: false,
+      loginTypeMap: {
+        account: '账号密码登录',
+        pthon: '手机验证码登录',
+        qrcode: '二维码扫码登录',
+        accountPthon: '账户密码验证码登录'
+      },
+      theType: this.loginTypes[0],
+      form: {
+        username: '',
+        password: '',
+        code: ''
+      },
+      pwd: '',
+      rules: {
+        username: [{ required: true, message: '请输入账号!', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入密码!', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入验证码!', trigger: 'blur' }],
+        phone: [
+          { required: true, message: '请输入手机号!', trigger: 'blur' },
+          {
+            pattern: /^1\d{10}$/,
+            message: '请输入正确手机号!',
+            trigger: 'blur'
+          }
+        ]
+      },
+      fPwV: false,
+      codeNum: '验证码'
+    }
+  },
+  methods: {
+    // 忘记密码
+    forgetPw() {
+      this.fPwV = true
+    },
+    // 切换登录方式
+    changeLoginType(val) {
+      this.theType = val
+    },
+    // 切换二维码小图标
+    cutQrcode() {
+      if (this.theType !== 'qrcode') {
+        this.theType = 'qrcode'
+      } else {
+        this.theType = this.loginTypes[0]
+      }
+    },
+    // 发送短信
+    outTime(num) {
+      clearTimeout(this.setTimeNum)
+      if (num > 0) {
+        num--
+        this.codeNum = num + 'S'
+
+        this.setTimeNum = setTimeout(() => {
+          this.outTime(num)
+        }, 1000)
+        num--
+      } else {
+        clearTimeout(this.setTimeNum)
+        this.codeNum = '验证码'
+      }
+    },
+    sendMsg(type = 'phone', typeName = '手机号') {
+      this.$refs['login-form'].validateField(type, (valid) => {
+        if (!valid) {
+          this.outTime(60)
+
+          axios
+            .get(
+              `/bems/prod_1.0/uas/api/authorization/captcha/${this.form[type]}/1`,
+              null,
+              { loading: false, noMsg: true }
+            )
+            .then(() => {
+              this.$message.success(
+                `${typeName}: ${this.form[type]} 验证码发送成功`
+              )
+            })
+            .catch(() => {
+              clearTimeout(this.setTimeNum)
+              this.codeNum = '验证码'
+              this.$message.warning(
+                `${typeName}: ${this.form[type]} 验证码发送失败`
+              )
+            })
+        }
+      })
+    },
+    loadingFn() {
+      this.loadingV = false
+    },
+    // 登录
+    submitLogin() {
+      this.$refs['login-form'].validate((valid) => {
+        if (!valid) return false
+
+        auth.removeToken()
+        this.theType === 'account' && this.passwordLogin().catch(this.loadingFn)
+        this.theType === 'pthon' && this.phoneLogin().catch(this.loadingFn)
+        this.theType === 'accountPthon' &&
+          this.accountPthonLogin().catch(this.loadingFn)
+      })
+    },
+    // 获取加密参数
+    async authorizationCode(username, password, code) {
+      let pwdArr = code ? [username, password, code] : [username, password]
+      let pwd = pwdArr.join('@@')
+
+      let { data = {} } = await axios.get(
+        '/bems/prod_1.0/uas/api/authorization/authorizationCode',
+        {},
+        { loading: false }
+      )
+      try {
+        pwd = encode(pwd, data.authorizationValue)
+      } catch (error) {
+        this.loadingV = false
+        // this.$message.warning('密码加密错误')
+      }
+      this.pwd = pwd + '@@' + data.authorizationKey
+    },
+    // 账号/密码登录
+    async passwordLogin() {
+      this.loadingV = true
+
+      let { username, password, code } = this.form
+      await this.authorizationCode(username, password, code)
+      // 请求该账号要不要强制验证码登录
+      let cL = await axios.post(
+        '/bems/prod_1.0/uas/api/authorization/checkLogin',
+        { grantType: 'password', username, password: this.pwd, code },
+        {
+          loading: false
+        }
+      )
+
+      // 输入验证码
+      if (cL.data === true) {
+        this.loadingV = false
+        this.theType = 'accountPthon'
+
+        this.sendMsg('username', '账户')
+        this.outTime(60)
+        return
+      }
+      // 签名验签
+      else if (cL.data === false) {
+        // 获取线上签名uDn
+        let uDn = await axios.get(
+          `/bems/prod_1.0/dssc/sign/getUserDn/${username}/password`,
+          null,
+          { loading: false }
+        )
+        let { checkCert, userDn } = uDn.data
+        // 走本地签名
+        let sign = undefined
+        let certDn = undefined
+        if (checkCert) {
+          let { getSign } = await import('../../plugins/Sign/index')
+          sign = getSign(username, userDn)
+          certDn = userDn
+        }
+
+        await this.authorizationCode(username, password, code) // authorizationValue 使用一次后就失效了
+        axios
+          .post(
+            '/bems/prod_1.0/uas/api/authorization/login',
+            {
+              grantType: 'password',
+              username,
+              password: this.pwd,
+              code,
+              sign,
+              certDn
+            },
+            {
+              loading: this.loadingFn
+            }
+          )
+          .then((res) => {
+            this.loginAfter(res.data)
+          })
+        return
+      }
+
+      // 正常登录
+      await this.authorizationCode(username, password, code) // authorizationValue 使用一次后就失效了
+      axios
+        .post(
+          '/bems/prod_1.0/uas/api/authorization/login',
+          { grantType: 'password', username, password: this.pwd, code },
+          { loading: this.loadingFn }
+        )
+        .then((res) => {
+          this.loginAfter(res.data)
+        })
+    },
+    // 二维码扫码登录
+    QrcodeLogin(userNo, qrcode) {
+      axios
+        .post(
+          '/bems/prod_1.0/uas/api/authorization/login',
+          {
+            grantType: 'qr_code',
+            type: 'qr_code',
+            username: userNo,
+            password: qrcode
+          },
+          { loading: false }
+        )
+        .then((res) => {
+          this.loginAfter(res.data)
+        })
+    },
+    // 手机号/验证码登录
+    async phoneLogin() {
+      this.loadingV = true
+      let { phone, code } = this.form
+      await this.authorizationCode(phone, code)
+      let pwd = this.pwd
+
+      axios
+        .post(
+          '/bems/prod_1.0/uas/api/authorization/login',
+          { grantType: 'mobile', username: phone, password: pwd },
+          { loading: this.loadingFn }
+        )
+        .then((res) => {
+          this.loginAfter(res.data)
+        })
+    },
+    async accountPthonLogin() {
+      this.loadingV = true
+      let { username, password, code } = this.form
+      await this.authorizationCode(username, password, code)
+      let pwd = this.pwd
+
+      axios
+        .post(
+          '/bems/prod_1.0/uas/api/authorization/login',
+          { grantType: 'user_password_code', username, password: pwd, code },
+          { loading: this.loadingFn }
+        )
+        .then((res) => {
+          this.loginAfter(res.data)
+        })
+    },
+    // 登录成功后
+    loginAfter(data) {
+      auth.setToken(data.accessToken)
+      Promise.all([this.getUserInfo(), this.getMicroAppsInfo()]).then(() => {
+        if (this.loginThen) {
+          this.loginThen().then(() => {
+            this.$router.replace('/')
+          })
+        } else {
+          this.$router.replace('/')
+        }
+      })
+    },
+    // 获取用户基本信息
+    async getUserInfo() {
+      let username = this.form.username
+      let { data } = await axios.get(
+        '/bems/prod_1.0/user/api/userController/userCltAdDep/' + username
+      )
+      let userInfo = data || { uname: username }
+
+      sessionStorage.setItem('userNo', username)
+      sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
+      sessionStorage.setItem('loginTime', Date.now())
+    },
+    // 获取子应用相关列表
+    async getMicroAppsInfo() {
+      this.loadingV = true
+      let { data } = await axios.get('/bems/1.0/menuTree/tree', null, {
+        loading: this.loadingFn
+      })
+      data || (data = [])
+
+      let layoutMenus = siteTree2menus(data)
+      sessionStorage.setItem('menuTree', JSON.stringify(layoutMenus))
+
+      let relaNos = siteTree2RelaNos(data)
+      sessionStorage.setItem('relaNos', JSON.stringify(relaNos))
+
+      // XXX: 兼容旧版resources
+      sessionStorage.setItem('resources', JSON.stringify(data))
+    }
+  }
+}
+</script>

package/src/components/LoginTemporary/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <div
+    class="login-wrap"
+    :style="{ backgroundImage: loginBg && `url(${loginBg})` }"
+  >
+    <div class="login-logo-box flex-box flex-v">
+      <img
+        v-if="loginLogo"
+        :src="loginLogo"
+        :style="{ width: loginLogoWidth, height: loginLogoHeight }"
+      />
+      <span
+        v-if="loginLogo && loginLogoText"
+        class="login-logo-hr m-l-s m-r-s"
+      ></span>
+      <h3 class="login-logo-text">
+        {{ loginLogoText }}
+      </h3>
+    </div>
+    <loginForm
+      :login-types="loginTypes"
+      :login-then="loginThen"
+      class="login-form"
+    >
+      <div slot="header" class="login-form-header m-b text-c">欢 迎 登 录</div>
+      <div slot="footer" class="login-form-footer m-t text-r">
+        <slot name="footer">
+          为达到更好的体验效果，请<a
+            class="el-icon-bottom"
+            href="https://down.360safe.com/se/360se13.1.5101.0.exe"
+            download="启程浏览器.exe"
+            style="text-decoration: none; color: var(--color-primary)"
+            >下载</a
+          >启程浏览器
+        </slot>
+      </div>
+    </loginForm>
+  </div>
+</template>
+
+<script>
+import getJsonc from '../../assets/getJsonc'
+import realUrl from '../../assets/realUrl'
+
+import loginForm from './form.vue'
+export default {
+  name: 'Login',
+  components: {
+    loginForm
+  },
+  props: {
+    loginThen: {
+      type: Function,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      loginTypes: ['account'],
+      loginBg: undefined,
+      loginLogo: undefined,
+      loginLogoWidth: '60px',
+      loginLogoHeight: 'auto',
+      loginLogoText: ''
+    }
+  },
+  created() {
+    this.removeStorage()
+    this.setConfig()
+  },
+  methods: {
+    setConfig() {
+      getJsonc('/server-config.jsonc').then(({ _layoutData = {} }) => {
+        _layoutData.loginTypes && (this.loginTypes = _layoutData.loginTypes)
+        this.loginBg = realUrl(_layoutData.loginBg)
+        this.loginLogo = realUrl(_layoutData.loginLogo)
+        this.loginLogoWidth = _layoutData.loginLogoWidth
+        this.loginLogoHeight = _layoutData.loginLogoHeight
+        this.loginLogoText = _layoutData.loginLogoText
+      })
+    },
+    removeStorage() {
+      for (let k in window.sessionStorage) {
+        !['subEntry'].includes(k) && window.sessionStorage.removeItem(k)
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.login-logo-box {
+  position: absolute;
+  top: 26px;
+  left: 26px;
+  color: #ffffff;
+}
+.login-logo-hr {
+  height: 24px;
+  border-left: 2px solid;
+}
+.login-logo-text {
+  margin: 0;
+  font-size: 28px;
+}
+.login-form {
+  position: absolute;
+  top: 20%;
+  right: 10%;
+  width: 324px;
+  min-height: 360px;
+  background: #f7f6f6;
+  padding: 30px !important;
+}
+.login-form-header {
+  font-size: 16px;
+  color: #3d4a57;
+}
+.login-form-footer {
+  font-size: 12px;
+  color: #3d4a57;
+}
+</style>