后台管理系统——登录功能
登录功能
1. 根据UI图完成页面编写
页面支持登录方式
-
账号登录包括用户名， 密码 ，图形验证码 ，短信验证码
- 账号登录形式为表单
// html
![]()
![]()
{{getSmsCodeText}}
{{ SmsCodeTime }}s后重新发送
登录
// javascript
此处为引用的base64位加密方法 以及jsencrypt插件加密
import { base64Encode } from "@/utils/Common.ts";
base64的加解密请到 [base64加解密学习](https://blog.csdn.net/socaicaicaicai/article/details/109773061)
import JsEncrypt from "jsencrypt/bin/jsencrypt.js";
JsEncrypt分段以及不分段加解密学习请到[JsEncrypt加解密](https://blog.csdn.net/socaicaicaicai/article/details/109767301)
export default {
name: "Login",
data() {
return {
loading: false, // 登录loading
smsCodeLoading: false, // 获取短信验证码loading
getSmsCodeText: "获取短信验证码",
passwordType: "password", // 密码
verifyCode: null, // 图形校验图片
SmsCodeTimer: null, // 短信发送时间倒计时
SmsCodeTime: null, // 短信发送时间倒计时展示
getSmsCodeAgainShow: true, // 是否展示重新发送
password: null, // 密码
loginRules: {
username: [
{
required: true,
trigger: "blur",
message: "请输入用户名"
}
],
password: [
{
required: true,
trigger: "blur",
message: "请输入密码"
}
],
verifyCode: [
{
required: true,
trigger: "blur",
message: "请输入验证码"
}
]
},
loginForm: {
username: "",
password: "",
verifyCode: "",
smsCode: ""
},
publickey: null // 公钥
};
},
created() {
sessionStorage.setItem("headerBars", []); // 清空sessionStorage中打开标签页
this.$store.dispatch("delAllVisitedViews"); // 清空vuex中打开标签页
},
mounted() {
this.getVerCode(); // 获取图形验证码
this.getRSAKeyCode(); // 获取公钥
this.keyUpEnterListener(); // 监听键盘事件
},
destroyed() {
this.keyUpEnterDestroyed();
this.getSmsCodeAgainShow = true;
this.getSmsCodeText = "获取验证码";
this.SmsCodeTimer = null;
clearInterval(this.SmsCodeTimer);
},
methods: {
// 点击回车登录
keyUpEnter(event) {
const keyCode = event.keyCode;
if (keyCode === 13) {
this.handleLogin();
}
},
//销毁keyup事件
keyUpEnterDestroyed() {
document.removeEventListener("keyup", this.keyUpEnter, true);
},
//监听keyup事件
keyUpEnterListener() {
document.addEventListener("keyup", this.keyUpEnter, true);
},
getVerCode() {
// 获取图片验证
this.$post.login.getVerifyCode().then(res => {
if (res.data.status === 0) {
this.verifyCode = "data:image/jpeg;base64," + res.data.content;
} else {
this.$message.error(
res.data.content ? res.data.content : res.data.msg
);
}
});
},
// 获取公钥
getRSAKeyCode() {
this.$post.login.getRSAKey().then(res => {
if (res.data.status === 0) {
this.publickey = res.data.content;
} else {
this.$message.error(res.data.msg);
}
});
},
getSmsCodeAgain() {
// 重新获取短信验证码
const VCTIME = 60;
this.SmsCodeTimer = null;
clearInterval(this.SmsCodeTimer);
if (this.loginForm.username === "") {
this.$message({
message: "请输入用户名",
type: "error",
showClose: true
});
} else if (!this.SmsCodeTimer) {
this.SmsCodeTime = VCTIME;
this.getSmsCodeAgainShow = false;
this.SmsCodeTimer = setInterval(() => {
if (this.SmsCodeTime <= 1) {
clearInterval(this.SmsCodeTimer);
this.SmsCodeTimer = null;
this.getSmsCodeText = "重新获取";
this.getSmsCodeAgainShow = true;
this.SmsCodeTime = VCTIME;
}
this.SmsCodeTime--;
}, 950);
}
},
// 获取短信验证码
getSmsCode() {
delete this.loginRules.smsCode; // 短信验证码的校验是动态添加的所以在获取短信验证码前需要先清除可能存在的短信验证，以免误操作 输入图形验证码后没有获取短信验证码直接登录后不能请求短信验证码了因为已经存在短信验证码的校验了。
this.$refs.loginForm.validate(valid => {
if (valid) {
let jse = new JsEncrypt();
jse.setPublicKey(this.publickey);
let data = {
username: this.loginForm.username,
password: jse.encrypt(this.loginForm.password),
verifyCode: this.loginForm.verifyCode
};
this.$post.login.loginSendSms(data).then(res => {
if (res.data.status === 0) {
this.getSmsCodeAgain();
this.$message.success("短信发送成功");
} else {
this.getVerCode();
this.$message.error(
res.data.content ? res.data.content : res.data.msg
);
}
});
} else {
delete this.loginRules.smsCode;
return false;
}
});
},
handleLogin() {
this.loginRules = {
...this.loginRules,
smsCode: [
{
required: true,
trigger: "blur",
message: "请输入短信验证码"
}
]
};
// 登录
this.$refs.loginForm.validate(valid => {
if (valid) {
if (!this.loginForm.smsCode) {
this.$message.error("请填写短信验证码");
return false;
} else {
this.loading = true;
let jse = new JsEncrypt();
jse.setPublicKey(this.publickey);
let obj = {
...this.loginForm,
password: jse.encrypt(this.loginForm.password)
};
this.$post.login.login(obj).then(res => {
this.loading = false;
if (res.data.status === 0) {
sessionStorage.setItem("username", this.loginForm.username);
document.cookie = `username=${this.loginForm.username}`;
if (res.data.content) {
this.getkickOut();
} else {
this.$router.push({
name: "home"
});
}
} else {
this.$message.error(
res.data.content ? res.data.content : res.data.msg
);
this.getVerCode();
}
});
}
} else {
console.log("error submit!!");
return false;
}
});
},
// 踢出 请求后台接口 完成单点登录功能
getkickOut() {
// 登录成功后 弹窗
this.$confirm("是否踢出其他登录地?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.$post.login.kickOut().then(res => {
if (res.data.status === 0) {
this.$message.success("踢出成功");
this.$router.push({
name: "home"
});
} else {
this.$message.error(res.data.msg);
}
});
})
.catch(() => {
this.$message.success("放弃踢出其他登录地！");
this.$router.push({
name: "home"
});
});
},
getEncryptCode(str, key) {
// 实例化jsEncrypt
let jse = new JsEncrypt();
console.log(jse);
jse.setPublicKey(key);
let pss = jse.encrypt(str.toString());
console.log(pss);
return pss;
}
}
};
-
二维码登录
js 生成二维码方法请看 使用 JavaScript 生成二维码 QRCode.js
-
其他方式登录 包括微信 QQ 微博 以及其他
跳转其他授权页面生成网页登录二维码进行登录