后台管理登录页

package.json

@@ -12,7 +12,7 @@
     "core-js": "^3.8.3",
     "driver.js": "^1.3.6",
     "element-ui": "^2.15.14",
-    "jsencrypt": "^3.3.2",
+    "jsencrypt": "^3.5.4",
     "lodash": "^4.17.21",
     "simple-keyboard": "^3.8.72",
     "simple-keyboard-layouts": "^3.4.114",

src/hubRouter/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
-// const Login = r => require.ensure([], () => r(require('../pages/modules/login/login.vue')), 'login')
+const Login = r => require.ensure([], () => r(require('../pages/modules/login/index.vue')), 'login')
 const Hub = r => require.ensure([], () => r(require('../pages/modules/hub/index.vue')), 'Hub')
 Vue.use(VueRouter)
 
@@ -9,7 +9,11 @@ const router = new VueRouter({
   routes: [
     {
       path: '/',
-      redirect: '/hub'
+      redirect: '/login'
+    },
+    {
+      path: '/login',
+      component: Login
     },
     {
       path: '/hub',

src/pages/modules/login/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="zbox relative body-container" :class="{'enClass': $i18n.locale === 'en-us'}">
+    <div class="absolute login-header">
+      <div class="zbox relative login_logo"></div>
+    </div>
+    <div class="absolute login-bottom"></div>
+    <el-row type="flex" class="zbox" justify="center" align="middle">
+      <el-col :span="12">
+        <div class="login-wraper">
+          <el-row type="flex" class="navs-wraper" justify="start" align="start">
+            <button class="nav_item" :class="{'nav_item_active': tab === 0}" @click="tab = 0">登录</button>
+            <button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="tab = 1">配置</button>
+          </el-row>
+          <div v-show="tab === 0" class="login-content_wraper">
+            <el-row type="flex" class="login-item" justify="space-between">
+              <el-col :span="5" class="login-label" >用户名</el-col>
+              <el-col :span="19">
+                <input type="text" class="login-input" v-model="username">
+              </el-col>
+            </el-row>
+            <el-row class="login-item">
+              <el-col :span="5" class="login-label">密码</el-col>
+              <el-col :span="19">
+                <input type="password" class="login-input" v-model="password">
+              </el-col>
+            </el-row>
+            <el-row type="flex" justify="center" style="margin-top: .3rem">
+              <el-col :span="8">
+                <button class="button_control" :disabled="disabled" @click="saveLogin"><p>登录</p></button>
+              </el-col>
+            </el-row>
+          </div>
+          <div v-show="tab === 1" class="login-content_wraper">
+            <el-row class="login-item">
+              <el-col :span="5" class="login-label">域名</el-col>
+              <el-col :span="19">
+                <input type="text" class="login-input" v-model.trim="baseUrl">
+              </el-col>
+            </el-row>
+            <el-row class="login-item" style="visibility: hidden">
+              <el-col  :span="8" class="login-label">刷新时间</el-col>
+              <el-col  :span="16">
+                <input type="number" class="login-input" v-model="setTime">
+              </el-col>
+            </el-row>
+            <el-row type="flex" justify="center" style="margin-top: .3rem">
+              <el-col :span="8">
+                <button class="button_control" @click="saveSetup"><p>配置</p></button>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import JSEncrypt from 'jsencrypt'
+import {authlogin} from '@/config/getData'
+import { mapGetters, mapActions } from 'vuex'
+const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n' +
+  '2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ=='
+export default {
+  name: 'ModuleLogin',
+  data () {
+    return {
+      tab: 0,
+      username: null,
+      password: null,
+      baseUrl: this.$store.getters.baseUrl,
+      setTime: 1000,
+      disabled: false
+    }
+  },
+  computed: {
+    ...mapGetters(['serverUrl'])
+  },
+  mounted () {
+    this.baseUrl = this.serverUrl
+  },
+  methods: {
+    ...mapActions(['setServerUrl']),
+    saveSetup () {
+      this.setServerUrl(this.baseUrl)
+      this.tab = 0
+    },
+    saveLogin () {
+      this.disabled = true
+      if (!this.username) {
+        this.toast('请输入用户名')
+        this.disabled = false
+        return
+      }
+      if (!this.password) {
+        this.toast('请输入密码')
+        this.disabled = false
+        return
+      }
+      this._authlogin()
+    },
+    async _authlogin () {
+      try {
+        let res = await authlogin(this.username, this.encryptData(this.password))
+        if (res.code === '1') {
+          let obj = {}
+          obj = Object.assign({}, res.result)
+          this.$store.dispatch('userInfo', JSON.stringify(obj))
+          this.$store.dispatch('setLoginInfo', {username: this.username, password: this.password})
+          this.$router.push('/hub')
+        } else {
+          this.Dialog(res.desc)
+        }
+        this.disabled = false
+      } catch (err) {
+        this.disabled = false
+      }
+    },
+    encryptData(txt) {
+      const encryptor = new JSEncrypt()
+      encryptor.setPublicKey(publicKey) // 设置公钥
+      return encryptor.encrypt(txt) // 对需要加密的数据进行加密
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '@/style/mixin'
+.login-header
+  top 0
+  _wh(100%, 10vh)
+  background center / 92% 100% url(@/images/new/login_header_bg.png) no-repeat
+.login_logo
+  top -14%
+  background center / 33% auto url(@/images/new/logo.png) no-repeat
+.login-bottom
+  bottom 0
+  left 25%
+  _wh(50%, 1.75rem)
+  background center / 9rem 100% url(@/images/new/login_dy.png) no-repeat
+.login-wraper
+  padding 8% 8.8% 6% 8%
+  background center / 100% 100% url(@/images/new/login_w_bg.png) no-repeat
+.navs-wraper
+  height 0.5rem
+  background center / 100% 100% url(@/images/new/login_nav_bg.png) no-repeat
+  padding-left 2%
+.nav_item
+  _wh(32%, 64%)
+  padding-left 9%
+  _font(.18rem, 1, #99B1DD,,)
+  font-family 'YouSheBiaoTiHei'
+  background-color transparent
+  &:first-child
+    background center / 100% 100% url(@/images/new/login_tab.png) no-repeat
+.nav_item_active
+  color #fff
+.login-content_wraper
+  padding 5% 5% 5%
+.login-item
+  margin-bottom .15rem
+.login-label
+  _font(.16rem, .4rem, #AFBED8,,)
+.login-input
+  width 100%
+  _font(.15rem, .4rem, #fff,,)
+  background rgba(45,88,184,0.1)
+  border 2px solid #4980BD
+  padding 0 .1rem
+  &:focus
+    background rgba(45,88,184,0.25);
+    border-color #21D0F2
+</style>

src/pages/modules/login/login.vue

@@ -1,269 +0,0 @@
-<!-- <template>
-  <div class="zbox relative body-container" :class="{'enClass': $i18n.locale === 'en-us'}">
-    <div class="absolute login-header">
-      <div class="zbox relative login_logo"></div>
-    </div>
-    <div class="absolute login-bottom"></div>
-    <el-row type="flex" class="zbox" justify="center" align="middle">
-      <el-col :span="12">
-        <div class="login-wraper">
-          <el-row type="flex" class="navs-wraper" justify="start" align="start">
-            <button class="nav_item" :class="{'nav_item_active': tab === 0}" @click="toLogin">{{ $t('login.passwordlogin') }}</button>
-            <button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="toSetup">{{ $t('login.configuration') }}</button>
-          </el-row>
-          <div v-show="tab === 0" class="login-content_wraper">
-            <el-row type="flex" class="login-item" justify="space-between">
-              <el-col :span="5" class="login-label" @click="toFocus(1)">{{ $t('common.username') }}</el-col>
-              <el-col :span="19">
-                <keyboard-input
-                inputClass="login-input"
-                keyboardClass="username"
-                :value="username"
-                @inputChange="inputChange"
-                @inputFocus="inputFocus"
-              ></keyboard-input>
-              </el-col>
-            </el-row>
-            <el-row class="login-item">
-              <el-col :span="5" class="login-label" @click="toFocus(2)">{{ $t('login.password') }}</el-col>
-              <el-col :span="19">
-                <input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
-              </el-col>
-            </el-row>
-            <el-row type="flex" justify="center" style="margin-top: .3rem">
-              <el-col :span="8">
-                <button class="button_control" :disabled="disabled" @click="saveLogin"><p>{{ $t('login.login') }}</p></button>
-              </el-col>
-            </el-row>
-          </div>
-          <div v-show="tab === 1" class="login-content_wraper">
-            <el-row class="login-item">
-              <el-col :span="8" class="login-label" @click="toFocus(3)">{{ $t('login.domainnameaddress') }}</el-col>
-              <el-col :span="16">
-                <input type="text" class="login-input" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal" data-next="1">
-              </el-col>
-            </el-row>
-            <el-row class="login-item">
-              <el-col  :span="8" class="login-label" @click="toFocus(4)">{{ $t('login.refreshtime') }}</el-col>
-              <el-col  :span="16">
-                <input type="number" class="login-input" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
-              </el-col>
-            </el-row>
-            <el-row type="flex" justify="center" style="margin-top: .3rem">
-              <el-col :span="8">
-                <button class="button_control" @click="saveSetup"><p>{{ $t('login.configuration') }}</p></button>
-              </el-col>
-            </el-row>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-    <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
-  </div>
-</template>
-
-<script>
-import KeyboardInput from '../../../components/keyboard-input.vue'
-import {authlogin} from '../../../config/getData'
-import {encrypt} from '../../../main.js'
-export default {
-  name: 'ModuleLogin',
-  components: {
-    KeyboardInput
-  },
-  data () {
-    return {
-      tab: 0,
-      username: this.$store.getters.defaultUsername,
-      password: this.$store.getters.defaultPassword,
-      baseUrl: this.$store.getters.baseUrl,
-      setTime: this.$store.getters.setTime / 1000,
-      disabled: false,
-      visible: false,
-      layout: 'normal',
-      input: null,
-      options: {
-        useKbEvents: false,
-        preventClickEvent: false
-      }
-    }
-  },
-  mounted () {
-    // 点对点项目分辨率 1024 * 768
-    // alert(document.body.clientWidth, 'a')
-    // alert(document.body.clientHeight, 'b')
-    // alert(window.screen.width, 'c')
-    // alert(window.screen.height, 'd')
-  },
-  methods: {
-    toFocus (i) {
-      switch (i) {
-        case 1:
-          this.$refs.input1.focus()
-          break
-        case 2:
-          this.$refs.input2.focus()
-          break
-        case 3:
-          this.$refs.input3.focus()
-          break
-        case 4:
-          this.$refs.input4.focus()
-          break
-      }
-    },
-    toSetup () {
-      this.tab = 1
-      this.hide()
-    },
-    toLogin () {
-      this.tab = 0
-      this.hide()
-    },
-    saveSetup () {
-      let obj = {
-        baseUrl: this.baseUrl,
-        setTime: this.setTime * 1000
-      }
-      this.$store.dispatch('setConfig', obj)
-      this.toLogin()
-    },
-    saveLogin () {
-      this.disabled = true
-      if (!this.username) {
-        // this.toast('请输入用户名')
-        this.toast(this.$t('login.toast1'))
-        this.disabled = false
-        return
-      }
-      if (!this.password) {
-        // this.toast('请输入密码')
-        this.toast(this.$t('login.toast2'))
-        this.disabled = false
-        return
-      }
-      this._authlogin()
-    },
-    async _authlogin () {
-      try {
-        let res = await authlogin(this.username, encrypt(this.password))
-        if (res.code === '1') {
-          let obj = {}
-          obj = Object.assign({}, res.result)
-          this.$store.dispatch('userInfo', JSON.stringify(obj))
-          this.$store.dispatch('setLoginInfo', {username: this.username, password: this.password})
-          this.hide()
-          if (!res.result.user.user.isAdmin) {
-            this.$router.push('/mini/home')
-          } else {
-            this.$router.push('/index/home')
-          }
-        } else {
-          this.Dialog(res.desc)
-        }
-        this.disabled = false
-      } catch (err) {
-        this.disabled = false
-        // this.toast(err)
-        const loading = this.$loading({
-          lock: true,
-          text: this.$t('common.loading'),
-          spinner: 'el-icon-loading',
-          background: 'rgba(0, 0, 0, 0.7)'
-        })
-        setTimeout(() => {
-          loading.close()
-        }, 4000)
-      }
-    },
-    show (e) {
-      // 关闭中文keyboard
-      let arr = document.querySelectorAll('.hg-theme-default')
-      arr.forEach((ele) => {
-        ele.style.visibility = 'hidden'
-      })
-      this.input = e.target
-      this.layout = e.target.dataset.layout
-      if (!this.visible) {
-        this.visible = true
-      }
-    },
-    hide () {
-      this.visible = false
-    },
-    accept () {
-      this.hide()
-    },
-    next () {
-      let inputs = document.querySelectorAll('input')
-      let found = false;
-      [].forEach.call(inputs, (item, i) => {
-        if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
-          found = true
-          this.$nextTick(() => {
-            inputs[i + 1].focus()
-          })
-        }
-      })
-      if (!found) {
-        this.input.blur()
-        this.hide()
-      }
-    },
-    inputChange (val) {
-      this.username = val
-    },
-    inputFocus () {
-      this.visible = false
-    }
-  }
-}
-</script>
-
-<style lang="stylus" scoped>
-@import '../../style/mixin'
-.login-header
-  top 0
-  _wh(100%, 10vh)
-  background center / 92% 100% url(../../../images/new/login_header_bg.png) no-repeat
-.login_logo
-  top -14%
-  background center / 33% auto url(../../../images/new/logo.png) no-repeat
-.login-bottom
-  bottom 0
-  left 25%
-  _wh(50%, 1.75rem)
-  background center / 9rem 100% url(../../../images/new/login_dy.png) no-repeat
-.login-wraper
-  padding 8% 8.8% 6% 8%
-  background center / 100% 100% url(../../../images/new/login_w_bg.png) no-repeat
-.navs-wraper
-  height 0.5rem
-  background center / 100% 100% url(../../../images/new/login_nav_bg.png) no-repeat
-  padding-left 2%
-.nav_item
-  _wh(32%, 64%)
-  padding-left 9%
-  _font(.18rem, 1, #99B1DD,,)
-  font-family 'YouSheBiaoTiHei'
-  background-color transparent
-  &:first-child
-    background center / 100% 100% url(../../../images/new/login_tab.png) no-repeat
-.nav_item_active
-  color #fff
-.login-content_wraper
-  padding 5% 5% 5%
-.login-item
-  margin-bottom .15rem
-.login-label
-  _font(.16rem, .4rem, #AFBED8,,)
-.login-input
-  width 100%
-  _font(.15rem, .4rem, #fff,,)
-  background rgba(45,88,184,0.1)
-  border 2px solid #4980BD
-  padding 0 .1rem
-  &:focus
-    background rgba(45,88,184,0.25);
-    border-color #21D0F2
-</style> -->

src/router/index.js

@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
-// const Login = r => require.ensure([], () => r(require('../pages/modules/login/login.vue')), 'login')
 const IndexComponent = r => require.ensure([], () => r(require('../pages/shells/index.vue')), 'index')
 const Home = r => require.ensure([], () => r(require('../pages/modules/home.vue')), 'Home')
 const Device = r => require.ensure([], () => r(require('../pages/modules/device/index.vue')), 'Device')

yarn.lock

@@ -3999,10 +3999,10 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-jsencrypt@^3.3.2:
+jsencrypt@^3.5.4:
-  version "3.3.2"
+  version "3.5.4"
-  resolved "https://registry.npmmirror.com/jsencrypt/-/jsencrypt-3.3.2.tgz#b0f1a2278810c7ba1cb8957af11195354622df7c"
+  resolved "https://registry.npmmirror.com/jsencrypt/-/jsencrypt-3.5.4.tgz#8db335ab164359449dd200d120f125f459476b25"
-  integrity sha512-arQR1R1ESGdAxY7ZheWr12wCaF2yF47v5qpB76TtV64H1pyGudk9Hvw8Y9tb/FiTIaaTRUyaSnm5T/Y53Ghm/A==
+  integrity sha512-kNjfYEMNASxrDGsmcSQh/rUTmcoRfSUkxnAz+MMywM8jtGu+fFEZ3nJjHM58zscVnwR0fYmG9sGkTDjqUdpiwA==
 
 jsesc@^3.0.2:
   version "3.1.0"