login.js 7.95 KB

import { mapGetters, mapActions, mapState } from "vuex";

import api from '@/api/api'
import {
	httpGet,
	httpPost
} from '@/api/fetch-api.js'

let PK = 'B5FE03847F02046C47292AF0FF2DE88977241483DD40C123046EB39CBE4C48167B120096CFF12CD16559322884A3C56FA92B07B89AB51FC8C91A75127622151DDD730DFF1F993D5A290CEAC0BBA7FC88285D8994ACBAFF50101EDE9A0925AD5DFFAFE96D53C370E9C5B37DF2F871F81C4D7CA6B7EC37FF459C07975AD9A74A95';
let E = '10001';

export default {
	data() {
		return {
			key: 'value',
			type: 1, // 1:帐密登陆 2:OTP登陆,
			values: {
				// 返回的token,串连整个流程,后台安全校验使用
				token: "",
				deviceId: "",
				vcodeuuid: "",
				token: "",
				deviceId: "",
				imageBase64: "",
				password: "",
				passwordRepeat: ""
			},
			times: {
				interval: 0, // 索引
				remain: 0, // 剩余时间
				tip: "" // 显示的文字
			},
			loginForm: {
				// userId: "18334783910",
				// password: "qweqwe123"
				userId: "",
				password: "",

				imageValue: "",
				mobileNo: "",
				otp: ""
			},
			loginCheck: {
				showImageCode: false,
				agreeProtocol: false
			},
			PK: process.env.RSA_PUBLIC_KEY || PK,
			E: process.env.RSA_KEY_INDEX || E,
		}
	},
	components: {},
	computed: {
		...mapState({
			userInfo: state => state.userInfo
		}),
		locale() {
			return this.$i18n.locale || 'tc';
		},
		i18n() {
			return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
		}
	},
	methods: {
		onCheckHandler() {

		},
		onProtocolHandler() {
			this.$router.push({
				path: "/protocol"
			})
		},
		onSubmitHandler() {

		},
		onRegisterHandler() {
			this.$router.push({
				path: "/register"
			})
		},
		onForgetHandler() {

		},
		onLoginTypeHandler(val) {
			this.type = val;
		},
		initData() { },
		handlerIsShowImageVcode() {
			return new Promise((resolve, reject) => {
				httpPost({
					url: api.stdIsShowImageVcode,
					data: {
						deviceId: this.values.deviceId,
						userId: this.loginForm.userId
					}
				}).then(response => {
					// 判断是否显示图形验证码
					if (this._handlerIsShowImageVcodeResponse(response)) {
						resolve(response);
					}
				})
			});
		},
		_handlerIsShowImageVcodeResponse(response) {
			if (response.returnCode == "0" && response.data.isShowVcode == "N") {
				return true;
			}
			this.values.token = response.data.token;
			return false;
		},
		handlerRefreshVcode() {
			// 刷新图形二维码
		},
		handlerLogin() {
			this.refreshDeviceId();
			if (!this.loginCheck.agreeProtocol) {
				this._showAgreeProtocalTips();
				return;
			}
			if (this.type == 1) {
				this._passwordLogin();
			} else {
				this._otpLogin();
			}
		},
		_passwordLogin() {
			// 刷新图形二维码
			this.handlerIsShowImageVcode().then(() => {
				httpPost({
					url: api.gsLogin,
					data: {
						deviceId: this.values.deviceId,
						loginName: this.loginForm.userId,
						loginPwd: this._passwordEncrypt(this.loginForm.password)
					}
				}).then(response => {
					this._handlerLoginResponse(response);
				})
			});
		},
		// 处理登录结果
		_handlerLoginResponse(response) {
			// let res = response.content;
			if (response.returnCode == 0 || response.resultCode == "0") {
				this.$store.commit("SET_USER_INFO", response.data);
				this._redirectTo();
			} else {
				let msg = response.returnMsg;
				this._showLoginErrorMessage(msg);
			}
		},
		_showAgreeProtocalTips() {
			alert("请同意《平安一账通会员服务协议》");
		},
		_showLoginErrorMessage(message) {
			alert(message);
		},
		_redirectTo() {
			let path = this.$route.query.callback || "/index";
			this.$router.push({
				path: path
			});
		},
		_otpLogin() {
			this._checkOptParams().then(() => {
				let data = {
					mobileNo: this.loginForm.mobileNo,
					token: this.values.token,
					otp: this.loginForm.otp,
					deviceId: this.refreshDeviceId()
				};
				httpPost({
					url: api.otpLogin,
					data: data
				}).then(response => {
					this._handlerLoginResponse(response);
				});
			});
		},
		_checkOptParams() {
			return new Promise((resolve, reject) => {
				this._checkMobileLegal().then(() => {
					if (!this.loginForm.otp) {
						this._showOtpEmptyTips();
						return;
					}
					if (!this.values.token) {
						this._showGetOptTips();
						return;
					}
					resolve();
				});
			})
		},
		_showGetOptTips() {
			alert('请先获取短信验证码');
		},
		_showImageValueTip() {
			alert("请输入图片验证码")
		},
		_showOtpEmptyTips() {
			alert('请输入短信验证码');
		},
		handlerStdSendOTP() {
			// 发送短信验证码
			this._checkMobileLegal().then(() => {
				if (this.times.remain > 0) {
					return;
				}
				if (this.values.vcodeuuid && !this.loginForm.imageValue) {
					this._showImageValueTip();
					return;
				}
				this._handlerIsShowImageVcode().then(() => {
					this._startStdSendOTP();
					this._startTimeClick();
				});
			});
		},
		handlerRefreshImageValue() {
			httpPost({
				url: api.stdRefreshVcode,
				data: {
					vcodeuuid: this.values.vcodeuuid
				}
			}).then(response => {
				this.values.imageBase64 = response.data.image;
			})
		},
		_checkMobileLegal() {
			// 检测手机号是否正确
			return new Promise((resolve, reject) => {
				let mobile = this.loginForm.mobileNo;
				if (mobile.length != 8 && mobile.length != 11) {
					this._showMobileNoIllegalTip()
					return;
				}
				resolve(true);
			});
		},
		_handlerIsShowImageVcode() {
			return new Promise((resolve, reject) => {
				// 如果这个值不为空,标识出现了图片验证码,不需要重新询问是否需要图像验证码了
				if (this.values.vcodeuuid) {
					resolve();
					return;
				}
				httpPost({
					url: api.stdIsShowImageVcode,
					data: {
						deviceId: this.values.deviceId,
						userId: this.loginForm.mobileNo
					}
				}).then(response => {
					// 判断是否显示图形验证码
					if (response.returnCode == "0") {
						this.values.token = response.data.token;
						if (response.data.isShowVcode == "N") {
							// if (!this.values.vcodeuuid) {
							// 	this.loginCheck.showImageCode = true;
							// 	this.values.vcodeuuid = "123456";
							// 	return;
							// }
							this.values.vcodeuuid = null;
							resolve(response);
						} else {
							// image 值:
							this.loginCheck.showImageCode = true;
							this.values.vcodeuuid = response.data.vcodeuuid;
							this.values.imageBase64 = response.data.image;
						}
					}
					return false;
				})
			});
		},
		_showMobileNoIllegalTip() {
			alert("手机号不正确");
		},
		_startStdSendOTP() {
			// 正式发送OTP信号
			let data = {
				mobileNo: this.loginForm.mobileNo,
				token: this.values.token,
				signFactor: new Date().getTime(),
				scene: "otpLogin",
				deviceId: this.refreshDeviceId()
			}
			if (this.values.vcodeuuid) {
				data["vcodeuuid"] = this.values.vcodeuuid;
				data["imageValue"] = this.loginForm.imageValue;
			}
			httpPost({ url: api.stdSendOTP, data: data });
		},
		_startTimeClick() {
			this.times.remain = 120;
			let _this = this;
			let i18n = this.$i18n.messages[this.$i18n.locale] || {};
			let msg = i18n.register.coutTips;
			_this.times.tip = msg.replace("{second}", _this.times.remain);
			this.times.interval = setInterval(function () {
				if (_this.times.remain <= 0) {
					clearInterval(_this.times.interval);
					_this.times.interval = 0;
					_this.times.remain = 0;
					return;
				}
				_this.times.remain--;
				_this.times.tip = msg.replace("{second}", _this.times.remain);
				_this.$set(_this, 'times', _this.times);
			}, 1000);
		},
		refreshDeviceId() {
			if (!this.values.deviceId) {
				this.values.deviceId = (Math.random() + "").substring(2)
			}
			return this.values.deviceId
		},
		_passwordEncrypt(rawPwd) {
			let rsa = new RSAKey();
			rsa.setPublic(this.PK, this.E);
			let res = rsa.encrypt(rawPwd);
			if (res == null) return rawPwd;
			return res;
		}
	},
	watch: {
		type() {
			this.loginCheck.showImageCode = false;
		}
	},
	mounted() {
		// console.log("PK ===  ", this.PK)
		// console.log("E ===  ", this.E)
	},
	created() { }
}