niushuai233
/
db-bastion-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
niushuai233 2 years ago
parent
7603591ee4
commit
3d4188b019
5 changed files with 224 additions and 166 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 356
      src/views/user/Login.vue

2
src/store/getters.js
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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"

356
src/views/user/Login.vue
Unescape View File

@ -1,214 +1,242 @@
<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
<a-tab-pane key="tab1" tab="账号密码登录"> :activeKey="customActiveKey"
<login-account ref="alogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-account> :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
</a-tab-pane> @change="handleTabClick"
>
<!-- <a-tab-pane key="tab2" tab="手机号登录"> <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> <login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>
</a-tab-pane> --> </a-tab-pane> -->
</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>
<router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" > <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
注册账户 注册账户
</router-link> --> </router-link> -->
</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
</a-button> size="large"
</a-form-item> type="primary"
htmlType="submit"
</a-form-model> class="login-button"
:loading="loginBtn"
<two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha> @click.stop.prevent="handleSubmit"
<login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant> :disabled="loginBtn"
<!-- <third-login ref="thirdLogin"></third-login> --> >确定
</div> </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> </template>
<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'
export default { export default {
components: { components: {
LoginSelectTenant, LoginSelectTenant,
TwoStepCaptcha, TwoStepCaptcha,
//ThirdLogin, //ThirdLogin,
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:{ methods: {
handleTabClick(key){ initEncryptKv() {
this.customActiveKey = key let that = this
}, getAction('/sys/getEncryptedString', {}).then(res => {
handleRememberMeChange(e){ that.$store.commit(ENCRYPT_KEY, res.result.key)
this.rememberMe = e.target.checked that.$store.commit(ENCRYPT_IV, res.result.iv)
}, })
/**跳转到登录页面的参数-账号获取*/ },
getRouterData(){ handleTabClick(key) {
this.$nextTick(() => { this.customActiveKey = key
let temp = this.$route.params.username || this.$route.query.username || '' },
if (temp) { handleRememberMeChange(e) {
this.$refs.alogin.acceptUsername(temp) 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 () { 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)
} else { } else {
//手机号码登录 //手机号码登录
this.$refs.plogin.handleLogin(this.rememberMe) this.$refs.plogin.handleLogin(this.rememberMe)
} }
}, },
// 校验失败 // 校验失败
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;
} }
.getCaptcha { .getCaptcha {
display: block; display: block;
width: 100%; width: 100%;
height: 40px; height: 40px;
} }
.forge-password { .forge-password {
font-size: 14px; font-size: 14px;
} }
button.login-button { button.login-button {
padding: 0 15px; padding: 0 15px;
font-size: 16px; font-size: 16px;
height: 40px; height: 40px;
width: 100%; width: 100%;
} }
.user-login-other { .user-login-other {
text-align: left; text-align: left;
margin-top: 24px; margin-top: 24px;
line-height: 22px; line-height: 22px;
.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;
}
} }
}
.register { .register {
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>
Write Preview
Loading…
Cancel
Save