后台项目扫码登录

原创

已于 2022-01-26 15:56:38 修改 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-01-19 18:12:14 首次发布

思路：通过后端接口拿到你需要的二维码地址 websocket链接的服务器地址和订阅地址并进行长链接，通过扫描二维码会进入一个是否确定登录的页面注：这个页面是由前端完成后端通过扫码重定向至该页面并带有用户的openId 和key 通过点击确定这个时候呢后端会给你一个确定登录的接口 如果你确定了长连接会返回给你一个token 通过toke实现用户的登录

前端自己完成后端重定向带有openid和key的页面具体看自己后端的返回
在这里插入图片描述

具体实现

第一步通过后端接口获得下列参数实现二维码的展示

在这里插入图片描述

这里的url 为二维码链接

vue 生成二维码
安装

npm install vue-qriously --save-dev

引入 main.js 入口文件

import Vue from 'vue'
import VueQriously from 'vue-qriously'
Vue.use(VueQriously)

使用

template>
    <qriously :value="initQCode" :size="138"/>    
</template>

<script>
    export default {
   
   
        name: 'app',
        data() {
   
   
            return {
   
   
                initQCode: '你自定定义的值'
            }
        }
    }
</script>
<style lang="less">
    /*样式*/
</style>

在这里插入图片描述

第二步使用SockJS实现websocket

下载

npm install sockjs-client stompjs -S

引入

import SockJS from 'sockjs-client'
import Stomp from 'stompjs'

建立连接订阅消息

<script>
import api from "@/api";
import {
   
    cloneLoop } from "@/utils";
import SockJS from "sockjs-client";
import Stomp from "stompjs";
import axios from "axios";
import {
   
    Base64 } from "js-base64";
export default {
   
   
  data() {
   
   
    return {
   
   
      img