登录功能

1. 根据UI图完成页面编写

页面支持登录方式

账号登录包括用户名， 密码 ，图形验证码 ，短信验证码

账号登录形式为表单

// html<template><el-form class="loginForm" :model="loginForm" :rules="loginRules" ref="loginForm" auto-complete="on"><!-- 此处为后台管理系统的logo --><div class="logo"><img :src="require('@/assets/img/logo.png')" alt /></div><el-form-item prop="username"><el-input placeholder="用户名" v-model.trim="loginForm.username" type="text" name="username" style="width: 80%"clearable></el-input></el-form-item><el-form-item prop="password"><el-input placeholder="密码" v-model.trim="loginForm.password" name="password" :type="passwordType"style="width: 80%" clearable show-password></el-input></el-form-item><el-form-item prop="verifyCode" class="verifyBox"><el-input placeholder="验证码" v-model.trim="loginForm.verifyCode" maxlength="6" clearable style="width: 67%"></el-input><!-- 图形验证码 --><img :src="verifyCode" @click="getVerCode" class="showImage" /></el-form-item><el-form-item prop="smsCode" class="smsCodeBox"><el-input placeholder="短信验证码" v-model.trim="loginForm.smsCode" maxlength="6" clearable style="width: 42%"></el-input><!-- 获取短信验证码 --><el-button v-if="getSmsCodeAgainShow" type="primary" class="smsCodeBtn" v-repeatClick@click.native.prevent="getSmsCode">{{getSmsCodeText}}</el-button><el-button v-else type="primary" v-repeatClick class="smsCodeBtn">{{ SmsCodeTime }}s后重新发送</el-button></el-form-item><div><!-- 登录按钮 --><el-button class="loginBtn" type="primary" @click.native.prevent="handleLogin" :loading="loading">登录</el-button></div></el-form></template>

// javascript此处为引用的base64位加密方法 以及jsencrypt插件加密 import { base64Encode } from "@/utils/Common.ts";base64的加解密请到 [base64加解密学习](/socaicaicaicai/article/details/109773061)import JsEncrypt from "jsencrypt/bin/jsencrypt.js";JsEncrypt分段以及不分段加解密学习请到[JsEncrypt加解密](/socaicaicaicai/article/details/109767301)export default {name: "Login",data() {return {loading: false, // 登录loadingsmsCodeLoading: false, // 获取短信验证码loadinggetSmsCodeText: "获取短信验证码",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) {// 实例化jsEncryptlet jse = new JsEncrypt();console.log(jse);jse.setPublicKey(key);let pss = jse.encrypt(str.toString());console.log(pss);return pss;}}};</script>

二维码登录

js 生成二维码方法请看 使用 JavaScript 生成二维码 QRCode.js

其他方式登录 包括微信 QQ 微博 以及其他

跳转其他授权页面生成网页登录二维码进行登录