小程序扫码登录pc后台

目录

一、效果图

二、前置条件

三、实现逻辑

四、PC后台页面代码

1、后台登录页面

2、扫码登录页面

 3、请求到后端的接口qrcode.js

五、微信小程序页面代码

1、扫码登录按钮 

2、确认授权页面AuthToPC

3、请求到后端的接口qrcode.js

 六、后端java处理代码

1、定义扫码状态常量类 

2、ScanController类（对应后台接口）

3、WxScanController类（对应微信小程序接口）

4、IScanService类

 5、ScanService类

---

一、效果图

二、前置条件

• 基于uniapp小程序+若依后台

• 微信用户登录后必须绑定系统用户，最终扫描还是利用已创建的系统用户登录

• 其他的实现方式是已校验以后，使用Feign走系统用户登录流程，但该种方式需要将系统用户的密码解密出来，若依的密码加密方式无法反向解密，所以操作不了。 

三、实现逻辑

• 后台请求到后端，创建uuid，通过工具类生成二维码，并将二维码转成Base64编码发给前端。
• 前端接收到Base64码直接展示成二维码图片，此时调查询二维码状态轮询，当二维码状态为已校验，就缓存token,走拉取系统用户权限流程。
• 微信小程序扫码获取到uuid,拿uuid去查询当前二维码状态，如果为未扫码，请求到后端改变扫码状态为已扫码，更改成功后跳转到授权确认界面。
• 点击确认授权，此时将扫码状态改为已校验，然后获取该微信用户绑定的系统用户，缓存该系统用户对应的token及用户菜单权限，等PC轮询拉到该数据就可以登录成功。

四、PC后台页面代码

1、后台登录页面

<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">  
	<h3 class="title">商业旅游管理系统</h3>  
	  
	<el-tabs v-model="activeName" type="card" @tab-click="handleClick">  
		<el-tab-pane label="扫码登录" name="first"></el-tab-pane>  
		<el-tab-pane label="账号登录" name="second"></el-tab-pane>  
	</el-tabs>  
	
	<div v-if="activeName=='second'">  
		<!--账号密码登录代码-->
	</div>  
	  
	<div style="text-align: center;" v-if="activeName=='first'">  
		<!--扫码登录组件-->
		<qrcode></qrcode>  
	</div>  
</el-form>

<script>
import qrcode from "./qrcode.vue";  
export default {  
	name: "Login",  
	components:{  
		qrcode  
	},  
	data() {  
		return {  
			activeName:"first",
		}
	}
}
</script>

2、扫码登录页面

<template>  
	<div v-if="qr_status === 'NOT_SCAN' || qr_status === 'EXPIRED'" class="qr-img">  
	  
		<!--直接把后端返回的二维码的base64编码作为图片的src值即可显示二维码-->  
		<el-image v-if="qr_status === 'NOT_SCAN'" style="width: 200px; height: 200px" :src="qr_src" fit="cover">  
		<div slot="error" class="image-slot">  
			<i class="el-icon-picture-outline"></i>  
		</div>  
		
		<div slot="placeholder" class="image-slot">  
			加载中  
			<span class="dot">...</span>  
		</div>  
	</el-image>  
	
	<div v-else style="margin: 0 auto; width: 200px; height: 200px; font-size: 16px; color: #f3f3f3">  
		<div class="expired-title">二维码已失效</div>  
			<el-button type="primary" style="margin: 40px auto" @click="getQrCode">刷新二维码</el-button>  
		</div>  
		<div class="fresh">  
			<el-link @click="getQrCode" :underline="false" type="primary">  
				<i class="el-icon-refresh-right"></i> 刷新二维码  
			</el-link>  
		</div>  
		<div class="fresh">  
			打开小程序扫码登录  
		</div>  
	</div>  
	
	<div v-else-if="qr_status === 'SCANNED' || qr_status === 'VERIFIED'" class="scand">  
		<div class="scand-icon">  
			<i class="el-icon-success"></i>  
		</div>  
		<div class="scan-title">App已扫描成功!</div>  
		<div class="scan-h1">请在手机上根据提示确认</div>  
	</div>  
</template>  
  
<script>  
import {createQrcode,checkQR} from "@/api/qrcode.js";  
import { setToken } from '@/utils/auth'  
export default {  
	name: "Qrcode",  
	data() {  
		return {  
			qr_src:"",  
			qr_status:"NOT_SCAN"  
		};  
	},  
	created() {  
		this.getQrCode();  
	},  
	
	methods: {  
		//获取二维码  
		getQrCode() {  
			//清除之前设置的长轮询  
			clearInterval(this.Timer);  
			//设置二维码初始状态为未扫描  
			this.qr_status = "NOT_SCAN";  
			//清空二维码url  
			this.qr_src = "";  
			createQrcode().then((res) => {  
				var data = res.data;  
				this.qr_src = data.replace(/[\r\n]/g, "");  
				console.log(this.qr_src)  
				//二维码请求成功后开始长轮询查询二维码状态  
				this.checkQr();  
			}).catch((err) => {  
				console.log(err);  
			});  
		},  
	
		//轮询检查二维码是否过期或者是否被扫描  
		checkQr() {  
			var _this = this;  
			//开始长轮询  
			var timer = setInterval(() => {  
				var data = { img: this.qr_src };  
				//携带上当前二维码的base64编码  
				checkQR(data) .then((res) => {  
					console.log(res)  
					var data = res.data;  
					if (res.code === 200) {  
						//返回当前