初次登录设置密码

This commit is contained in:
zhaoxiao
2021-09-24 17:06:38 +08:00
parent 8e84d2d1ef
commit d87b8eeb94
6 changed files with 480 additions and 295 deletions
+324 -186
View File
@@ -5,59 +5,104 @@
<span class="title">
<img src='../../assets/userLogin.png' alt=''>
</span>
<a-row>
<a-col :span="6"></a-col>
<a-col :span="12">
<a-form-item>
<a-input
size="large"
v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
type="text"
placeholder="请输入帐号">
<a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="6"></a-col>
</a-row>
<a-row>
<a-col :span="6"></a-col>
<a-col :span="12">
<a-form-item>
<a-input
v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
size="large"
type="password"
autocomplete="false"
placeholder="请输入密码"
>
<a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="6"></a-col>
</a-row>
<a-row style="margin-bottom: 0%;">
<a-col :span="6"></a-col>
<a-col :span="7">
<a-form-item>
<a-input
v-decorator="['inputCode',validatorRules.inputCode]"
size="large"
type="text"
@change="inputCodeChange"
autocomplete="off"
placeholder="请输入验证码">
<a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="5" class='code' style='text-align: right'>
<img v-if="requestCodeSuccess" :src="randCodeImage" @click="handleChangeCheckCode"/>
<img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
</a-col>
<a-col :span="4"></a-col>
</a-row>
<!-- 账号密码登录-->
<template v-if="!isVerificationCodeLogin">
<a-row>
<a-col :span="6"></a-col>
<a-col :span="12">
<a-form-item>
<a-input
size="large"
v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
type="text"
placeholder="请输入帐号">
<a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="6"></a-col>
</a-row>
<a-row>
<a-col :span="6"></a-col>
<a-col :span="12">
<a-form-item>
<a-input
v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
size="large"
type="password"
autocomplete="false"
placeholder="请输入密码"
>
<a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="6"></a-col>
</a-row>
<a-row style="margin-bottom: 0%;">
<a-col :span="6"></a-col>
<a-col :span="7">
<a-form-item>
<a-input
v-decorator="['inputCode',validatorRules.inputCode]"
size="large"
type="text"
@change="inputCodeChange"
autocomplete="off"
placeholder="请输入验证码">
<a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="5" class='code' style='text-align: right'>
<img v-if="requestCodeSuccess" :src="randCodeImage" @click="handleChangeCheckCode"/>
<img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
</a-col>
<a-col :span="4"></a-col>
</a-row>
</template>
<!-- 手机号验证码登录-->
<template v-else>
<a-row>
<a-col :span="6"></a-col>
<a-col :span="12">
<a-form-item>
<a-input
size="large"
v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
type="text"
placeholder="请输入手机号">
<a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="6"></a-col>
</a-row>
<a-row>
<a-col :span="6"></a-col>
<a-col :span="12">
<a-form-item class='captcha'>
<a-input
size="large"
v-decorator="['captcha', { rules: validatorRules.captcha.rules,validateTrigger: 'blur'}]"
type="text"
placeholder="请输入验证码">
<a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}"/>
</a-input>
<a-button
tabindex="-1"
size="default"
:disabled="state.smsSendBtn"
@click.stop.prevent="getCaptcha"
v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button>
</a-form-item>
</a-col>
<a-col :span="6"></a-col>
</a-row>
</template>
<a-row class="login-btn">
<a-col :span="6"></a-col>
<a-col :span="12">
@@ -70,16 +115,24 @@
:loading="loginBtn"
@click.stop.prevent="handleSubmit"
:disabled="loginBtn">
{{ loginBtn ? "登录中" : "登录" }}
{{ loginBtn ? '登录中' : '登录' }}
</a-button>
</a-form-item>
</a-col>
<a-col :span="6"></a-col>
</a-row>
<a-row style="margin-bottom: 2%;">
<a-col :span="3"></a-col>
<a-col :span="4"></a-col>
<a-col :span="6"></a-col>
<!-- 切换登录方式-->
<a-col :span="4">
<a-form-item>
<span @click="switchingLoginMode" class="forget-password" style="margin-left: 5px; color: #BFBFBF;">
{{ isVerificationCodeLogin ? '账号密码登录' : '手机验证码登录' }}
</span>
</a-form-item>
</a-col>
<a-col :span="3">
</a-col>
<a-col :span="5" style="text-align: right;">
<a-form-item>
<span @click='forgetPassword' class="forget-password" style="float: right;color: #BFBFBF;">
@@ -93,17 +146,18 @@
</div>
</template>
<script>
import { mapActions } from "vuex"
import { timeFix } from "@/utils/util"
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'
import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import { postAction,getAction } from '@/api/manage'
import {getRSAPublicKey} from '@/api/login.js'
import {JSEncrypt} from 'jsencrypt'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { postAction, getAction } from '@/api/manage'
import { getRSAPublicKey } from '@/api/login.js'
import { JSEncrypt } from 'jsencrypt'
import { phoneReg } from '@/utils/validate'
export default {
components: {},
data () {
data() {
return {
loginBtn: false,
loginType: 0,
@@ -111,36 +165,39 @@ export default {
form: this.$form.createForm(this),
state: {
time: 60,
smsSendBtn: false,
smsSendBtn: false
},
validatorRules:{
username:{rules: [{ required: true, message: '请输入用户名!'},{validator: this.handleUsernameOrEmail}]},
password:{rules: [{ required: true, message: '请输入密码!',validator: 'click'}]},
mobile:{rules: [{validator:this.validateMobile}]},
captcha:{rule: [{ required: true, message: '请输入验证码!'}]},
inputCode:{rules: [{ required: true, message: '请输入验证码!'}]}
validatorRules: {
username: { rules: [{ required: true, message: '请输入手机号!'}, { validator: this.checkPhone }] },
password: { rules: [{ required: true, message: '请输入密码!' }] },
mobile: { rules: [{ validator: this.validateMobile }] },
captcha: { rule: [{ required: true, message: '请输入验证码!'}] },
inputCode: { rules: [{ required: true, message: '请输入验证码!' }] },
phone: { rules: [{ required: true, message: '请输入手机号!' }, { validator: this.checkPhone }] }
},
velorifiedCode:"",
inputCodeContent:"",
inputCodeNull:true,
currentUsername:"",
currdatetime:'',
randCodeImage:'',
requestCodeSuccess:false,
rsaPublicKey:''
velorifiedCode: '',
inputCodeContent: '',
inputCodeNull: true,
currentUsername: '',
currdatetime: '',
randCodeImage: '',
requestCodeSuccess: false,
rsaPublicKey: '',
isVerificationCodeLogin: false, // 是否验证码登录,true--是;false--否;默认false,账号密码登录
needSetPassword: false, // 是否需要设置密码
}
},
created () {
this.currdatetime = new Date().getTime();
created() {
this.currdatetime = new Date().getTime()
Vue.ls.remove(ACCESS_TOKEN)
this.getRouterData();
this.handleChangeCheckCode();
this.getRouterData()
this.handleChangeCheckCode()
},
methods: {
...mapActions(['Login', 'Logout', 'PhoneLogin']),
handleUsernameOrEmail (rule, value, callback) {
const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
handleUsernameOrEmail(rule, value, callback) {
const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
if (regex.test(value)) {
this.loginType = 0
} else {
@@ -148,170 +205,222 @@ export default {
}
callback()
},
handleSubmit () {
let that = this
let loginParams = {};
that.loginBtn = true;
that.form.validateFields([ 'username', 'password','inputCode', 'rememberMe' ], { force: true }, (err, values) => {
if (!err) {
/**
* 验证手机号
* @param rule
* @param value
* @param callback
*/
checkPhone(rule, value, callback) {
if (value) {
if (phoneReg(value)) {
callback()
} else {
callback('请输入正确格式的手机号')
}
} else {
callback()
}
},
handleSubmit() {
let that = this
let loginParams = {}
that.loginBtn = true
that.form.validateFields(['username', 'password', 'inputCode', 'captcha', 'rememberMe'], { force: true }, (err, values) => {
if (!err) {
loginParams.remember_me = values.rememberMe
loginParams.captcha = that.inputCodeContent
// 手机登录验证码
if (that.isVerificationCodeLogin) {
loginParams.captcha = values.captcha
} else {
loginParams.captcha = that.inputCodeContent
}
loginParams.checkKey = that.currdatetime
loginParams.rsaPublicKey = that.rsaPublicKey;
loginParams.rsaPublicKey = that.rsaPublicKey
// 新建JSEncrypt对象
let encrypt = new JSEncrypt();
encrypt.setPublicKey(loginParams.rsaPublicKey);
let encrypt = new JSEncrypt()
encrypt.setPublicKey(loginParams.rsaPublicKey)
// 公钥加密
loginParams.username = encrypt.encrypt(values.username)
loginParams.password = encrypt.encrypt(values.password)
//登录
that.Login(loginParams).then((res) => {
this.loginSuccess()
console.log(this.isVerificationCodeLogin)
let httpFunction = null
if (this.isVerificationCodeLogin) {
httpFunction = that.PhoneLogin
} else {
httpFunction = that.Login
}
httpFunction(loginParams).then((response) => {
if (response.message.indexOf('updatePassword') > -1) {
this.$notification['error']({
message: '设置密码',
description: '初次登录需要设置密码',
duration: 4
})
this.$router.push({
path: '/user/alteration',
query: {
isFirstLogin: 'true',
}
})
} else {
this.loginSuccess()
}
}).catch((err) => {
if (err.code === 500) {
// 刷新验证码
this.handleChangeCheckCode();
this.handleChangeCheckCode()
}
that.requestFailed(err);
});
}else {
that.loginBtn = false;
that.requestFailed(err)
})
} else {
that.loginBtn = false
}
})
},
getCaptcha (e) {
e.preventDefault();
let that = this;
this.form.validateFields([ 'mobile' ], { force: true },(err,values) => {
if(!values.mobile){
that.cmsFailed("请输入手机号");
}else if (!err) {
this.state.smsSendBtn = true;
getCaptcha(e) {
e.preventDefault()
let that = this
this.form.validateFields(['username'], { force: true }, (err, values) => {
if (!values.username) {
that.cmsFailed('请输入手机号')
} else if (!err) {
this.state.smsSendBtn = true
let interval = window.setInterval(() => {
if (that.state.time-- <= 0) {
that.state.time = 60;
that.state.smsSendBtn = false;
window.clearInterval(interval);
that.state.time = 60
that.state.smsSendBtn = false
window.clearInterval(interval)
}
}, 1000);
}, 1000)
const hide = this.$message.loading('验证码发送中..', 0);
let smsParams = {};
smsParams.mobile=values.mobile;
smsParams.smsmode="0";
postAction("/sys/sms",smsParams)
const hide = this.$message.loading('验证码发送中..', 0)
let smsParams = {}
smsParams.phone = values.username
getAction('/company/sendVerificationCode', smsParams)
.then(res => {
if(!res.success){
setTimeout(hide, 0);
this.cmsFailed(res.message);
if (!res.success) {
setTimeout(hide, 0)
this.cmsFailed(res.message)
}
setTimeout(hide, 500);
setTimeout(hide, 500)
})
.catch(err => {
setTimeout(hide, 1);
clearInterval(interval);
that.state.time = 60;
that.state.smsSendBtn = false;
this.requestFailed(err);
});
setTimeout(hide, 1)
clearInterval(interval)
that.state.time = 60
that.state.smsSendBtn = false
this.requestFailed(err)
})
}
}
);
)
},
/**
* 切换登录方式
*/
switchingLoginMode() {
this.isVerificationCodeLogin = !this.isVerificationCodeLogin
},
// 忘记密码
forgetPassword() {
this.$router.push({ name: 'alteration' })
},
handleChangeCheckCode(){
this.currdatetime = new Date().getTime();
getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{
if(res.success){
handleChangeCheckCode() {
this.currdatetime = new Date().getTime()
getAction(`/sys/randomImage/${ this.currdatetime }`).then(res => {
if (res.success) {
this.randCodeImage = res.result
this.requestCodeSuccess=true
}else{
this.requestCodeSuccess = true
} else {
this.$message.error(res.message)
this.requestCodeSuccess=false
this.requestCodeSuccess = false
}
}).catch(()=>{
this.requestCodeSuccess=false
}).catch(() => {
this.requestCodeSuccess = false
})
this.getPublicKey();
this.getPublicKey()
},
//获取RSA公钥
getPublicKey(){
getPublicKey() {
// 获取公钥
getRSAPublicKey().then(res => {
this.rsaPublicKey = res.result
})
},
loginSuccess () {
loginSuccess() {
// this.$router.push({ path: "/dashboard/analysis" }).catch((res)=>{})
// 进入首页
this.$router.push({ path: "/" }).catch((res)=>{})
this.$router.push({ path: '/' }).catch(() => {
})
this.$notification.success({
message: '欢迎',
description: `${timeFix()},欢迎回来`,
});
description: `${ timeFix() },欢迎回来`
})
},
cmsFailed(err){
this.$notification[ 'error' ]({
message: "登录失败",
description:err,
duration: 4,
});
},
requestFailed (err) {
this.$notification[ 'error' ]({
cmsFailed(err) {
this.$notification['error']({
message: '登录失败',
description: ((err.response || {}).data || {}).message || err.message || "请求出现错误,请稍后再试",
duration: 4,
});
this.loginBtn = false;
description: err,
duration: 4
})
},
validateMobile(rule,value,callback){
if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)){
callback();
}else{
callback("您的手机号码格式不正确!");
requestFailed(err) {
this.$notification['error']({
message: '登录失败',
description: ((err.response || {}).data || {}).message || err.message || '请求出现错误,请稍后再试',
duration: 4
})
this.loginBtn = false
},
validateMobile(rule, value, callback) {
if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
callback()
} else {
callback('您的手机号码格式不正确!')
}
},
validateInputCode(rule,value,callback){
if(!value || this.verifiedCode==this.inputCodeContent){
callback();
}else{
callback("您输入的验证码不正确!");
validateInputCode(rule, value, callback) {
if (!value || this.verifiedCode == this.inputCodeContent) {
callback()
} else {
callback('您输入的验证码不正确!')
}
},
generateCode(value){
generateCode(value) {
this.verifiedCode = value.toLowerCase()
},
inputCodeChange(e){
inputCodeChange(e) {
this.inputCodeContent = e.target.value
},
getRouterData(){
getRouterData() {
this.$nextTick(() => {
if (this.$route.params.username) {
this.form.setFieldsValue({
'username': this.$route.params.username
});
})
}
})
},
}
}
}
</script>
<style lang="less" scoped>
.ant-input-affix-wrapper/deep/ .ant-input:not(:first-child){
.ant-input-affix-wrapper /deep/ .ant-input:not(:first-child) {
padding-left: 40px;
}
.ant-row{
.ant-row {
margin-bottom: 4%;
}
.main{
.main {
height: 100%;
.user-layout-login{
.user-layout-login {
z-index: 99;
width: 50%;
box-sizing: border-box;
@@ -320,32 +429,38 @@ export default {
right: 0;
top: 50%;
transform: translateY(-50%);
.user-box{
.user-box {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: space-between;
flex-direction: column;
.title{
.title {
display: flex;
justify-content: center;
img{
img {
width: 395px;
height: 124px;
}
}
.code{
img{
.code {
img {
height: 60px;
border-radius: 30px;
}
}
.login-btn{
.login-btn {
margin-top: 20px;
margin-bottom: 0;
font-size: 10px;
/deep/.ant-btn-primary{
/deep/ .ant-btn-primary {
height: 60px;
background: #069F99;
border: none;
@@ -354,16 +469,39 @@ export default {
}
}
}
/deep/.ant-row{
/deep/ .ant-row {
margin-bottom: 0 !important;
}
/deep/.ant-input-affix-wrapper .ant-input{
/deep/ .ant-input-affix-wrapper .ant-input {
border-radius: 30px;
height: 60px;
border: 1px solid #E6E3E3;
}
.forget-password{
.forget-password {
cursor: pointer;
}
}
.captcha {
position: relative;
/deep/ button {
border: none;
color: #069F99;
position: absolute;
right: 10px;
top: -6px;
box-shadow: none;
background: none;
}
}
/deep/ .ant-input {
border-radius: 30px;
height: 60px;
border: 1px solid #E6E3E3;
}
</style>