后台项目 扫码登录

思路 ：通过后端接口拿到你需要的二维码地址 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: "",
      line: 0,
      loading: false,
      loginForm: {
        username: "15928824314",
        password: "123456"
      },
      username: "",
      password: "",
      isCode: true,
      ws: "",
      imgUrl: "",
      subscribe: "",
      ishanding: false,
      timer: null,
      stompClient: null
    };
  },
  computed: {},
  watch: {},
  created() {
    // 获取二维码
    api.QRLogin().then(res => {
      console.log(res.data, "扫码");
      if (res.code === 200) {
        this.disconnect();
        this.imgUrl = res.data.url;
        this.ws = res.data.ws;
        this.subscribe = res.data.subscribe;
        // 获取到数据时进行重连
        this.initWebSocket();
        window.clearInterval(this.timer);
        // 二维码过期时 再次请求二维码接口 重新进行长连接
        this.timer = setInterval(() => {
          this.getQR();
        }, res.data.expired * 1000);
      } else {
        this.$message.error(res.data.message || res.statusText);
      }
    });
  },
  beforeDestroy() {
    // 页面离开时断开连接,清除定时器
    this.disconnect();
    clearInterval(this.timer);
  },
  methods: {
    getQR() {
      api.QRLogin().then(res => {
        console.log(res.data, "扫码");
        if (res.code === 200) {
          this.disconnect();
          this.imgUrl = res.data.url;
          this.ws = res.data.ws;
          this.subscribe = res.data.subscribe;
          this.initWebSocket();
        } else {
          this.$message.error(res.data.message || res.statusText);
        }
      });
    },
    // 初始化长连接
    initWebSocket() {
      this.connection();
    },
    // 断开链接
    disconnect() {
      if (this.stompClient) {
        this.stompClient.disconnect();
      }
    },
    //websocket连接
    connection() {
      // 建立链接对象
      const socket = new SockJS(this.ws); // url为链接地址
      // 获取STOMP子协议的客户端对象
      this.stompClient = Stomp.over(socket);
      // 定义客户端的认证信息,按需求配置
      let headers = {
        Authorization: ""
      };
      // 向服务器发起websocket连接
      this.stompClient.connect(
        headers,
        fff => {
          console.log(fff, "你是什么");
          console.log("链接了吗", this.subscribe);
          this.stompClient.subscribe(
            this.subscribe, // 订阅地址
            msg => {
              let data = JSON.parse(msg.body);
              console.log("--------------");
              console.log(msg.body, "收到信息");
              if (data.action === "handling") {
                console.log("处理中...");
                this.ishanding = true;
              } else if (data.action === "logon" && data.data != "") {
                //  观察后端数据  是否转码
                // console.log(data.data, "未转码");
                // let token =Base64.decode(data.data);
                let token = data.data;
                window.localStorage.setItem("token", token);
                // 获得token 后   请求用户详情接口 并处理
              }
            },
            headers
          );
        },
        err => {
          console.log(err, "失败");
        }
      );
    },
  }
};
</script>