fix: 增加对加密所需内容的获取并存储

src/store/getters.js

@@ -18,6 +18,8 @@ const getters = {
     return state.enhance.enhanceJs[code]
   },
   sysSafeMode: state => state.user.sysSafeMode,
+  encryptKey: state => state.encrypt.KEY,
+  encryptIv: state => state.encrypt.IV
 
 }
 

src/store/index.js

@@ -7,6 +7,7 @@ import permission from './modules/permission'
 import enhance from './modules/enhance'
 import online from './modules/online'
 import getters from './getters'
+import encrypt from './modules/encrypt'
 
 Vue.use(Vuex)
 
@@ -17,6 +18,7 @@ export default new Vuex.Store({
     permission,
     enhance,
     online,
+    encrypt
   },
   state: {
 

src/store/modules/encrypt.js

@@ -0,0 +1,24 @@
+const encrypt = {
+    state: {
+        KEY: 'default',
+        IV: 'default'
+    },
+    mutations: {
+        ENCRYPT_KEY: (state, key) => {
+            state.KEY = key
+        },
+        ENCRYPT_IV: (state, iv) => {
+            state.IV = iv
+        }
+    },
+    action: {
+        setEncryptKey: ({ commit }, type) => {
+            commit('ENCRYPT_KEY', type)
+        },
+        setEncryptIv: ({ commit }, type) => {
+            commit('ENCRYPT_IV', type)
+        }
+    }
+}
+
+export default encrypt

src/store/mutation-types.js

@@ -26,3 +26,5 @@ export const CONTENT_WIDTH_TYPE = {
   Fluid: 'Fluid',
   Fixed: 'Fixed'
 }
+export const ENCRYPT_KEY = "ENCRYPT_KEY"
+export const ENCRYPT_IV = "ENCRYPT_IV"

src/views/user/Login.vue

@@ -1,214 +1,242 @@
 <template>
-  <div class="main">
-    <a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
-      <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"  @change="handleTabClick">
-        <a-tab-pane key="tab1" tab="账号密码登录">
-          <login-account ref="alogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-account>
-        </a-tab-pane>
-
-        <!-- <a-tab-pane key="tab2" tab="手机号登录">
+    <div class="main">
+        <a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
+            <a-tabs
+                :activeKey="customActiveKey"
+                :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
+                @change="handleTabClick"
+            >
+                <a-tab-pane key="tab1" tab="账号密码登录">
+                    <login-account
+                        ref="alogin"
+                        @validateFail="validateFail"
+                        @success="requestSuccess"
+                        @fail="requestFailed"
+                    ></login-account>
+                </a-tab-pane>
+
+                <!-- <a-tab-pane key="tab2" tab="手机号登录">
           <login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>
         </a-tab-pane> -->
-      </a-tabs>
+            </a-tabs>
 
-      <a-form-model-item>
-        <a-checkbox @change="handleRememberMeChange" default-checked>自动登录</a-checkbox>
-        <!-- <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
+            <a-form-model-item>
+                <!-- <a-checkbox @change="handleRememberMeChange" default-checked>自动登录</a-checkbox> -->
+                <!-- <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
           忘记密码
         </router-link>
         <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
           注册账户
         </router-link> -->
-      </a-form-model-item>
-
-      <a-form-item style="margin-top:24px">
-        <a-button size="large"  type="primary"  htmlType="submit"  class="login-button"  :loading="loginBtn"  @click.stop.prevent="handleSubmit" :disabled="loginBtn">确定
-        </a-button>
-      </a-form-item>
-
-    </a-form-model>
-
-    <two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha>
-    <login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
-    <!-- <third-login ref="thirdLogin"></third-login> -->
-  </div>
+            </a-form-model-item>
+
+            <a-form-item style="margin-top:24px">
+                <a-button
+                    size="large"
+                    type="primary"
+                    htmlType="submit"
+                    class="login-button"
+                    :loading="loginBtn"
+                    @click.stop.prevent="handleSubmit"
+                    :disabled="loginBtn"
+                    >确定
+                </a-button>
+            </a-form-item>
+        </a-form-model>
+
+        <two-step-captcha
+            v-if="requiredTwoStepCaptcha"
+            :visible="stepCaptchaVisible"
+            @success="stepCaptchaSuccess"
+            @cancel="stepCaptchaCancel"
+        ></two-step-captcha>
+        <login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
+        <!-- <third-login ref="thirdLogin"></third-login> -->
+    </div>
 </template>
 
 <script>
 import Vue from 'vue'
-import { ACCESS_TOKEN, ENCRYPTED_STRING } from '@/store/mutation-types'
+import { ACCESS_TOKEN, ENCRYPTED_STRING, ENCRYPT_KEY, ENCRYPT_IV } from '@/store/mutation-types'
 // import ThirdLogin from './third/ThirdLogin'
 import LoginSelectTenant from './LoginSelectTenant'
 import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
 import { getEncryptedString } from '@/utils/encryption/aesEncrypt'
 import { timeFix } from '@/utils/util'
+import { getAction } from '@/api/manage'
 
 import LoginAccount from './LoginAccount'
 import LoginPhone from './LoginPhone'
 
 export default {
     components: {
-      LoginSelectTenant,
-      TwoStepCaptcha,
-      //ThirdLogin,
-      LoginAccount,
-      LoginPhone
+        LoginSelectTenant,
+        TwoStepCaptcha,
+        //ThirdLogin,
+        LoginAccount,
+        LoginPhone
     },
-    data () {
-      return {
-        customActiveKey: 'tab1',
-        rememberMe: true,
-        loginBtn: false,
-        requiredTwoStepCaptcha: false,
-        stepCaptchaVisible: false,
-        encryptedString:{
-          key:"",
-          iv:"",
-        },
-      }
+    data() {
+        return {
+            customActiveKey: 'tab1',
+            rememberMe: true,
+            loginBtn: false,
+            requiredTwoStepCaptcha: false,
+            stepCaptchaVisible: false,
+            encryptedString: {
+                key: '',
+                iv: ''
+            }
+        }
     },
     created() {
-      Vue.ls.remove(ACCESS_TOKEN)
-      this.getRouterData();
-      this.rememberMe = true
+        Vue.ls.remove(ACCESS_TOKEN)
+        this.getRouterData()
+        this.rememberMe = true
+        this.initEncryptKv()
     },
-    methods:{
-      handleTabClick(key){
-        this.customActiveKey = key
-      },
-      handleRememberMeChange(e){
-        this.rememberMe = e.target.checked
-      },
-      /**跳转到登录页面的参数-账号获取*/
-      getRouterData(){
-        this.$nextTick(() => {
-          let temp = this.$route.params.username || this.$route.query.username || ''
-          if (temp) {
-            this.$refs.alogin.acceptUsername(temp)
-          }
-        })
-      },
+    methods: {
+        initEncryptKv() {
+            let that = this
+            getAction('/sys/getEncryptedString', {}).then(res => {
+                that.$store.commit(ENCRYPT_KEY, res.result.key)
+                that.$store.commit(ENCRYPT_IV, res.result.iv)
+            })
+        },
+        handleTabClick(key) {
+            this.customActiveKey = key
+        },
+        handleRememberMeChange(e) {
+            this.rememberMe = e.target.checked
+        },
+        /**跳转到登录页面的参数-账号获取*/
+        getRouterData() {
+            this.$nextTick(() => {
+                let temp = this.$route.params.username || this.$route.query.username || ''
+                if (temp) {
+                    this.$refs.alogin.acceptUsername(temp)
+                }
+            })
+        },
 
-      //登录
-      handleSubmit () {
-        this.loginBtn = true;
-        if (this.customActiveKey === 'tab1') {
-          // 使用账户密码登录
-          this.$refs.alogin.handleLogin(this.rememberMe)
-        } else {
-          //手机号码登录
-          this.$refs.plogin.handleLogin(this.rememberMe)
-        }
-      },
-      // 校验失败
-      validateFail(){
-        this.loginBtn = false;
-      },
-      // 登录后台成功
-      requestSuccess(loginResult){
-        this.$refs.loginSelect.show(loginResult)
-      },
-      //登录后台失败
-      requestFailed (err) {
-        let description = ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试"
-        this.$notification[ 'error' ]({
-          message: '登录失败',
-          description: description,
-          duration: 4,
-        });
-        //账户密码登录错误后更新验证码
-        if(this.customActiveKey === 'tab1' && description.indexOf('密码错误')>0){
-          this.$refs.alogin.handleChangeCheckCode()
-        }
-        this.loginBtn = false;
-      },
-      loginSelectOk(){
-        this.loginSuccess()
-      },
-      //登录成功
-      loginSuccess () {
-        this.$router.push({ path: "/dashboard/analysis" }).catch(()=>{
-          console.log('登录跳转首页出错,这个错误从哪里来的')
-        })
-        this.$notification.success({
-          message: '欢迎',
-          description: `${timeFix()}，欢迎回来`,
-        });
-      },
+        //登录
+        handleSubmit() {
+            this.loginBtn = true
+            if (this.customActiveKey === 'tab1') {
+                // 使用账户密码登录
+                this.$refs.alogin.handleLogin(this.rememberMe)
+            } else {
+                //手机号码登录
+                this.$refs.plogin.handleLogin(this.rememberMe)
+            }
+        },
+        // 校验失败
+        validateFail() {
+            this.loginBtn = false
+        },
+        // 登录后台成功
+        requestSuccess(loginResult) {
+            this.$refs.loginSelect.show(loginResult)
+        },
+        //登录后台失败
+        requestFailed(err) {
+            let description = ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试'
+            this.$notification['error']({
+                message: '登录失败',
+                description: description,
+                duration: 4
+            })
+            //账户密码登录错误后更新验证码
+            if (this.customActiveKey === 'tab1' && description.indexOf('密码错误') > 0) {
+                this.$refs.alogin.handleChangeCheckCode()
+            }
+            this.loginBtn = false
+        },
+        loginSelectOk() {
+            this.loginSuccess()
+        },
+        //登录成功
+        loginSuccess() {
+            this.$router.push({ path: '/dashboard/analysis' }).catch(() => {
+                console.log('登录跳转首页出错,这个错误从哪里来的')
+            })
+            this.$notification.success({
+                message: '欢迎',
+                description: `${timeFix()}，欢迎回来`
+            })
+        },
 
-      stepCaptchaSuccess () {
-        this.loginSuccess()
-      },
-      stepCaptchaCancel () {
-        this.Logout().then(() => {
-          this.loginBtn = false
-          this.stepCaptchaVisible = false
-        })
-      },
-      //获取密码加密规则
-      getEncrypte(){
-        var encryptedString = Vue.ls.get(ENCRYPTED_STRING);
-        if(encryptedString == null){
-          getEncryptedString().then((data) => {
-            this.encryptedString = data
-          });
-        }else{
-          this.encryptedString = encryptedString;
+        stepCaptchaSuccess() {
+            this.loginSuccess()
+        },
+        stepCaptchaCancel() {
+            this.Logout().then(() => {
+                this.loginBtn = false
+                this.stepCaptchaVisible = false
+            })
+        },
+        //获取密码加密规则
+        getEncrypte() {
+            var encryptedString = Vue.ls.get(ENCRYPTED_STRING)
+            if (encryptedString == null) {
+                getEncryptedString().then(data => {
+                    this.encryptedString = data
+                })
+            } else {
+                this.encryptedString = encryptedString
+            }
         }
-      }
-
     }
-
-  }
+}
 </script>
 <style lang="less" scoped>
-  .user-layout-login {
+.user-layout-login {
     label {
-      font-size: 14px;
+        font-size: 14px;
     }
-  .getCaptcha {
-      display: block;
-      width: 100%;
-      height: 40px;
+    .getCaptcha {
+        display: block;
+        width: 100%;
+        height: 40px;
     }
 
-  .forge-password {
-      font-size: 14px;
+    .forge-password {
+        font-size: 14px;
     }
 
     button.login-button {
-      padding: 0 15px;
-      font-size: 16px;
-      height: 40px;
-      width: 100%;
+        padding: 0 15px;
+        font-size: 16px;
+        height: 40px;
+        width: 100%;
     }
 
-  .user-login-other {
-      text-align: left;
-      margin-top: 24px;
-      line-height: 22px;
-
-    .item-icon {
-        font-size: 24px;
-        color: rgba(0,0,0,.2);
-        margin-left: 16px;
-        vertical-align: middle;
-        cursor: pointer;
-        transition: color .3s;
-
-      &:hover {
-          color: #1890ff;
+    .user-login-other {
+        text-align: left;
+        margin-top: 24px;
+        line-height: 22px;
+
+        .item-icon {
+            font-size: 24px;
+            color: rgba(0, 0, 0, 0.2);
+            margin-left: 16px;
+            vertical-align: middle;
+            cursor: pointer;
+            transition: color 0.3s;
+
+            &:hover {
+                color: #1890ff;
+            }
         }
-      }
 
-    .register {
-        float: right;
-      }
+        .register {
+            float: right;
+        }
     }
-  }
+}
 </style>
 <style>
-  .valid-error .ant-select-selection__placeholder{
+.valid-error .ant-select-selection__placeholder {
     color: #f5222d;
-  }
+}
 </style>