vue2使用qrcode生成二维码，扫码登录

vue2使用qrcode生成二维码，可以扫码登录

1. 下载qrcode：npm i qrcode
2. 在需要的组件引入：import QRCode from 'qrcode'

<template>
  <div class="login">
    <div class="container">
      <div class="main">
        <h3>扫码登录</h3>
        <!-- 放置二维码盒子 -->
        <canvas ref="canvas"></canvas>
        <!-- 二维码失效盒子 -->
        <div v-if="isRefresh" class="invalid">
          <p>二维码已失效</p>
          <button @click="refreshQrcode">点击刷新</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode'
import { qrKey, qrCreate, qrCheck } from '@/api/index'
export default {
  name: 'qrLogin',
  data () {
    return {
      // 二维码地址
      url: '',
      // 二维码的key
      key: '',
      // 定时
      timer: null,
      // 二维码是否过期
      isRefresh: false
    }
  },
  methods: {
    // 获取key
    async getQrKey () {
      const res = await qrKey({ timestamp: Date.now() })
      this.key = res.data.data.unikey
    },
    // 获取二维码地址
    async createQrCode () {
      const res = await qrCreate({ key: this.key, qrimg: '' })
      this.url = res.data.data.qrurl
    },
    // 生成二维码
    makeQrCode () {
      let opts = {
        errorCorrectionLevel: 'H',
        type: 'image/png',
        quality: 0.3,
        width: 165,
        height: 165,
        text: 'xxx',
        color: {
          dark: '#333333',
          light: '#fff'
        }
      }
      QRCode.toCanvas(this.$refs.canvas, this.url, opts)
    },
    // 检查二维码状态
    async checkQrCode () {
      const res = await qrCheck({ key: this.key })
      window.console.log(res)
      if (res.data.code === 803) {
        // 803表示登录成功，以下做登录成功后的事件
        window.console.log('登录成功')
        this.stop()
      } else if (res.data.code === 800) {
        // 803表示二维码过期
        window.console.log('二维码过期')
        // 开启css覆盖当前二维码
        this.isRefresh = true
        // 停止轮询
        this.stop()
      }
    },
    // 轮询
    lunxunData () {
      this.timer = window.setInterval(() => {
        setTimeout(() => {
          this.checkQrCode()
        }, 0)
      }, 5000)
    },
    // 停止轮询
    stop () {
      window.clearInterval(this.timer)
      this.timer = null
    },
    // 将二维码方法放到一个方法中
    async getData () {
      // 生成key
      await this.getQrKey()
      // 生成二维码url
      await this.createQrCode()
      // 生成二维码
      await this.makeQrCode()
      // 开启轮询
      await this.lunxunData()
    },
    // 刷新二维码
    refreshQrcode () {
      // 关闭二维码过期样式
      this.isRefresh = false
      this.getData()
    }
  },
  mounted () {
    this.getData()
  },
  // 组件注销时停止轮询
  destroyed () {
    window.clearInterval(this.timer)
    this.timer = null
  }
}
</script>

<style>
* {
  margin: 0 auto;
  padding: 0;
}
.login {
  width: 100%;
  height: 100vh;
  background: url('../assets/1.jpg');
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main {
  position: relative;
  width: 280px;
  height: 250px;
  margin: 0 auto;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 2px 2px 2px #bbb;
}
h3 {
  padding: 10px;
  text-align: center;
}
canvas {
  display: flex;
  align-items: center;
  justify-content: center;
}
.invalid {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -68px;
  margin-left: -70px;
  width: 143px;
  height: 143px;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
}
p {
  font-size: 14px;
  margin-top: 40px;
  margin-bottom: 5px;
}
button {
  color: #fff;
  padding: 3px 10px;
  background: #71c771;
  border: 1px solid #5baf5b;
  border-radius: 5px;
  cursor: pointer;
}
</style>

源码：https://gitee.com/sysna/vue2-qr-code-login