Browse Source

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

master
niushuai233 2 years ago
parent
commit
3d4188b019
  1. 2
      src/store/getters.js
  2. 2
      src/store/index.js
  3. 24
      src/store/modules/encrypt.js
  4. 2
      src/store/mutation-types.js
  5. 132
      src/views/user/Login.vue

2
src/store/getters.js

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

2
src/store/index.js

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

24
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

2
src/store/mutation-types.js

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

132
src/views/user/Login.vue

@ -1,9 +1,18 @@
<template> <template>
<div class="main"> <div class="main">
<a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit"> <a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
<a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }" @change="handleTabClick"> <a-tabs
:activeKey="customActiveKey"
:tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
@change="handleTabClick"
>
<a-tab-pane key="tab1" tab="账号密码登录"> <a-tab-pane key="tab1" tab="账号密码登录">
<login-account ref="alogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-account> <login-account
ref="alogin"
@validateFail="validateFail"
@success="requestSuccess"
@fail="requestFailed"
></login-account>
</a-tab-pane> </a-tab-pane>
<!-- <a-tab-pane key="tab2" tab="手机号登录"> <!-- <a-tab-pane key="tab2" tab="手机号登录">
@ -12,7 +21,7 @@
</a-tabs> </a-tabs>
<a-form-model-item> <a-form-model-item>
<a-checkbox @change="handleRememberMeChange" default-checked>自动登录</a-checkbox> <!-- <a-checkbox @change="handleRememberMeChange" default-checked>自动登录</a-checkbox> -->
<!-- <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;"> <!-- <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
忘记密码 忘记密码
</router-link> </router-link>
@ -22,13 +31,25 @@
</a-form-model-item> </a-form-model-item>
<a-form-item style="margin-top:24px"> <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
size="large"
type="primary"
htmlType="submit"
class="login-button"
:loading="loginBtn"
@click.stop.prevent="handleSubmit"
:disabled="loginBtn"
>确定
</a-button> </a-button>
</a-form-item> </a-form-item>
</a-form-model> </a-form-model>
<two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha> <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> <login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
<!-- <third-login ref="thirdLogin"></third-login> --> <!-- <third-login ref="thirdLogin"></third-login> -->
</div> </div>
@ -36,12 +57,13 @@
<script> <script>
import Vue from 'vue' 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 ThirdLogin from './third/ThirdLogin'
import LoginSelectTenant from './LoginSelectTenant' import LoginSelectTenant from './LoginSelectTenant'
import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha' import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
import { getEncryptedString } from '@/utils/encryption/aesEncrypt' import { getEncryptedString } from '@/utils/encryption/aesEncrypt'
import { timeFix } from '@/utils/util' import { timeFix } from '@/utils/util'
import { getAction } from '@/api/manage'
import LoginAccount from './LoginAccount' import LoginAccount from './LoginAccount'
import LoginPhone from './LoginPhone' import LoginPhone from './LoginPhone'
@ -54,33 +76,41 @@ export default {
LoginAccount, LoginAccount,
LoginPhone LoginPhone
}, },
data () { data() {
return { return {
customActiveKey: 'tab1', customActiveKey: 'tab1',
rememberMe: true, rememberMe: true,
loginBtn: false, loginBtn: false,
requiredTwoStepCaptcha: false, requiredTwoStepCaptcha: false,
stepCaptchaVisible: false, stepCaptchaVisible: false,
encryptedString:{ encryptedString: {
key:"", key: '',
iv:"", iv: ''
}, }
} }
}, },
created() { created() {
Vue.ls.remove(ACCESS_TOKEN) Vue.ls.remove(ACCESS_TOKEN)
this.getRouterData(); this.getRouterData()
this.rememberMe = true this.rememberMe = true
this.initEncryptKv()
},
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)
})
}, },
methods:{ handleTabClick(key) {
handleTabClick(key){
this.customActiveKey = key this.customActiveKey = key
}, },
handleRememberMeChange(e){ handleRememberMeChange(e) {
this.rememberMe = e.target.checked this.rememberMe = e.target.checked
}, },
/**跳转到登录页面的参数-账号获取*/ /**跳转到登录页面的参数-账号获取*/
getRouterData(){ getRouterData() {
this.$nextTick(() => { this.$nextTick(() => {
let temp = this.$route.params.username || this.$route.query.username || '' let temp = this.$route.params.username || this.$route.query.username || ''
if (temp) { if (temp) {
@ -90,8 +120,8 @@ export default {
}, },
// //
handleSubmit () { handleSubmit() {
this.loginBtn = true; this.loginBtn = true
if (this.customActiveKey === 'tab1') { if (this.customActiveKey === 'tab1') {
// 使 // 使
this.$refs.alogin.handleLogin(this.rememberMe) this.$refs.alogin.handleLogin(this.rememberMe)
@ -101,68 +131,66 @@ export default {
} }
}, },
// //
validateFail(){ validateFail() {
this.loginBtn = false; this.loginBtn = false
}, },
// //
requestSuccess(loginResult){ requestSuccess(loginResult) {
this.$refs.loginSelect.show(loginResult) this.$refs.loginSelect.show(loginResult)
}, },
// //
requestFailed (err) { requestFailed(err) {
let description = ((err.response || {}).data || {}).message || err.message || "请求出现错误,请稍后再试" let description = ((err.response || {}).data || {}).message || err.message || '请求出现错误,请稍后再试'
this.$notification[ 'error' ]({ this.$notification['error']({
message: '登录失败', message: '登录失败',
description: description, description: description,
duration: 4, duration: 4
}); })
// //
if(this.customActiveKey === 'tab1' && description.indexOf('密码错误')>0){ if (this.customActiveKey === 'tab1' && description.indexOf('密码错误') > 0) {
this.$refs.alogin.handleChangeCheckCode() this.$refs.alogin.handleChangeCheckCode()
} }
this.loginBtn = false; this.loginBtn = false
}, },
loginSelectOk(){ loginSelectOk() {
this.loginSuccess() this.loginSuccess()
}, },
// //
loginSuccess () { loginSuccess() {
this.$router.push({ path: "/dashboard/analysis" }).catch(()=>{ this.$router.push({ path: '/dashboard/analysis' }).catch(() => {
console.log('登录跳转首页出错,这个错误从哪里来的') console.log('登录跳转首页出错,这个错误从哪里来的')
}) })
this.$notification.success({ this.$notification.success({
message: '欢迎', message: '欢迎',
description: `${timeFix()},欢迎回来`, description: `${timeFix()},欢迎回来`
}); })
}, },
stepCaptchaSuccess () { stepCaptchaSuccess() {
this.loginSuccess() this.loginSuccess()
}, },
stepCaptchaCancel () { stepCaptchaCancel() {
this.Logout().then(() => { this.Logout().then(() => {
this.loginBtn = false this.loginBtn = false
this.stepCaptchaVisible = false this.stepCaptchaVisible = false
}) })
}, },
// //
getEncrypte(){ getEncrypte() {
var encryptedString = Vue.ls.get(ENCRYPTED_STRING); var encryptedString = Vue.ls.get(ENCRYPTED_STRING)
if(encryptedString == null){ if (encryptedString == null) {
getEncryptedString().then((data) => { getEncryptedString().then(data => {
this.encryptedString = data this.encryptedString = data
}); })
}else{ } else {
this.encryptedString = encryptedString; this.encryptedString = encryptedString
}
} }
} }
} }
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.user-layout-login { .user-layout-login {
label { label {
font-size: 14px; font-size: 14px;
} }
@ -190,11 +218,11 @@ export default {
.item-icon { .item-icon {
font-size: 24px; font-size: 24px;
color: rgba(0,0,0,.2); color: rgba(0, 0, 0, 0.2);
margin-left: 16px; margin-left: 16px;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
transition: color .3s; transition: color 0.3s;
&:hover { &:hover {
color: #1890ff; color: #1890ff;
@ -205,10 +233,10 @@ export default {
float: right; float: right;
} }
} }
} }
</style> </style>
<style> <style>
.valid-error .ant-select-selection__placeholder{ .valid-error .ant-select-selection__placeholder {
color: #f5222d; color: #f5222d;
} }
</style> </style>
Loading…
Cancel
Save