Tauri网易云扫描二维码登录

先上页面代码

<template>
  <div class="bbox">
    <div class="top titlebar" data-tauri-drag-region>
      <div class="topp" data-tauri-drag-region>
        <div data-tauri-drag-region>登录</div>

        <div class="ttt">
          <div
            class="titlebar-button"
            id="titlebar-close"
            style="cursor: pointer"
          >
            <svg
              class="icon icon_close"
              style="
                width: 1em;
                height: 1em;
                vertical-align: middle;
                fill: currentColor;
                overflow: hidden;
                color: white;
              "
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3700"
            >
              <path
                d="M548.992 503.744L885.44 167.328a31.968 31.968 0 1 0-45.248-45.248L503.744 458.496 167.328 122.08a31.968 31.968 0 1 0-45.248 45.248l336.416 336.416L122.08 840.16a31.968 31.968 0 1 0 45.248 45.248l336.416-336.416L840.16 885.44a31.968 31.968 0 1 0 45.248-45.248L548.992 503.744z"
                p-id="3701"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div class="mid" v-show="data.ewm_show1">
      <div class="left">
        <!-- <img
          src="
         https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9643571155/525c/faac/2dc6/fe695c03c7c358ddaa4651736b26a55f.png"
          alt=""
        /> -->
        <img src="../assets/images/ewm/1.png" alt="">
      </div>
      <div class="right">
        <div class="rightt">扫码登陆</div>
        <img :src="data.qrimgs" alt="" style="width: 200px; height: 200px" />
        <!-- <div class="rightb">
          使用&nbsp;<a
            href="https://music.163.com/#/download"
            style="color: skyblue"
            >网易云app</a
          >
          扫码登录
        </div> -->
        <div>
          <el-button round @click="else_login">选择其他登录模式</el-button>
        </div>
      </div>
    </div>
    <div class="box" v-show="data.ewm_show2">
      <div>
        <div style="margin-top:30px;">
          <!-- <img
            style="width:150px;height:150px;"
            src="https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9765284460/1b1d/9f46/2fa3/2d5d07bb5fcf8c24c1ad788c923ef313.png"
            alt=""
          /> -->
          <img src="../assets/images/ewm/2.png" alt="">
        </div>
        <div>扫描成功</div>
        <div>请在手机上确认</div>
      </div>
    </div>
    <div class="box" v-show="data.ewm_show3">
      <div>
        <div style="margin-top:30px;">
          <!-- <img
            style="width:150px;height:150px;"
            src="https://img1.baidu.com/it/u=1950256038,1337595389&fm=253&fmt=auto&app=138&f=JPEG?w=454&h=378"
            alt=""
          /> -->
          <img src="../assets/images/ewm/3.png" alt="">
        </div>
        <div>确认成功</div>
      </div>
    </div>
    <div class="box" v-show="data.ewm_show4">
      <div>
        <div style="margin-top:30px;">
          <!-- <img
            style="width:150px;height:150px;"
            src="https://img2.baidu.com/it/u=2770401062,667969626&fm=253&fmt=auto&app=138&f=JPEG?w=497&h=500"
            alt=""
          /> -->
          <img src="../assets/images/ewm/4.png" alt="">
        </div>
        <div>二维码失效</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { http } from "@tauri-apps/api";
// import bus from "../utils/index";
import { onMounted, ref, reactive, watch } from "vue";
import { appWindow, WebviewWindow } from "@tauri-apps/api/window"; //引入打开窗口功能
import {
  ElMessage,
  ElMessageBox,
  ElButton,
  ElAutocomplete,
} from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

const data = reactive({
  unikey: "", //key
  qrurl: "",
  qrimgs: "", //二维码图片
  qrCheckData: {}, //状态
  isLogin: false, //是否登录
  ewm_show1: true,
  ewm_show2: false,
  ewm_show3: false,
  ewm_show4: false,
});

watch(
  () => data.isLogin,
  (newval, oldval) => {
    let times = setInterval(async () => {
      qrCheck();
      let code = data.qrCheckData.code;
      // }
      if (code === 801) {
        console.log("watch:等待扫码");
      } else if (code === 802) {
        console.log("watch:等待确认");
        data.ewm_show1 = false;
        data.ewm_show2 = true;
      } else if (code === 803) {
        data.ewm_show3 = true;
        data.ewm_show1 = false;
        data.ewm_show2 = false;
        console.log("watch:确认成功");
        sessionStorage.setItem("user", true);
        
        // 用户登录成功之后操作
        // router.push({ path: "index" });

        //用户登录成功后清除定时器
        clearInterval(times);
        //获取登录之后的uid和用户详情以及登录状态
        getStatus();
        getUinfo();
        localStorage.setItem("testtestinfo",'我是测试能不能获取信息')
        console.log('success');
        
        // bus.emit("login_success");

        // appWindow.close();
      } else if (code === 800) {
        data.ewm_show4 = true;
        data.ewm_show1 = false;
        data.ewm_show2 = false;
        data.ewm_show3 = false;
        console.log("watch:二维码过期");
        router.go(0);
      }
    }, 5000);
  }
);

const else_login = () => {
  router.push({ path: "else_login" });
};

//获取二维码的key值
const getKey = () => {
  http
       // http://127.0.0.1:8000这里填你服务器部署网易云api的ip地址，我在本地部署网易云api,所以用的是127.0.0.1:8000
    .fetch("http://127.0.0.1:8000/login/qr/key", {
      headers: {
        Authorization: "Bearer test",
      },
      method: "GET",
      // *** 注意：get请求的参数值必须为字符串，不然tauri会报错，这是tauri框架的要求；可以自己手动进行字符串强制转换 ***
      query: {
        timerstamp: new Date().getTime().toString(),
      },
      // params: {
      //   timerstamp: new Date().getTime(),
      // },
    })
    .then((res) => {
      data.unikey = res.data.data.unikey;
      loginQqr(data.unikey);
    });
};

//通过key去获取二维码
const loginQqr = (key) => {
  http
// http://127.0.0.1:8000这里填你服务器部署网易云api的ip地址，我在本地部署网易云api,所以用的是http://127.0.0.1:8000
    .fetch(
      "http://127.0.0.1:8000/login/qr/create?key=" + key + "&qrimg=true",
      {
        headers: {
          Authorization: "Bearer test",
        },
        method: "GET",
        // *** 注意：get请求的参数值必须为字符串，不然tauri会报错，这是tauri框架的要求；可以自己手动进行字符串强制转换 ***
        params: {
          timerstamp: new Date().getTime(),
        },
      }
    )
    .then((res) => {
      data.qrurl = res.data.data.qrurl;
      data.qrimgs = res.data.data.qrimg;
      qrCheck();
    });
};

//获取二维码的状态
const qrCheck = () => {
  http
// http://127.0.0.1:8000这里填你服务器部署网易云api的ip地址，我在本地部署网易云api,所以用的是127.0.0.1:8000
    .fetch("http://127.0.0.1:8000/login/qr/check?key=" + data.unikey, {
      headers: {
        Authorization: "Bearer test",
      },
      method: "GET",
      // *** 注意：get请求的参数值必须为字符串，不然tauri会报错，这是tauri框架的要求；可以自己手动进行字符串强制转换 ***
      query: {
        timerstamp: new Date().getTime().toString(), //传入参数时间戳
        withCredentials: "true",
      },
      // params: {
      //   timerstamp: new Date().getTime(), //传入参数时间戳
      //   withCredentials: true,
      // },
    })
    .then((res) => {
      console.log(res.data.message);

      data.qrCheckData = res.data;
      sessionStorage.setItem("cookie", res.data.cookie);
      data.isLogin = true;
    });
};

//获取登录之后的状态
const getStatus = () => {
  http
// http://127.0.0.1:8000这里填你服务器部署网易云api的ip地址，我在本地部署网易云api,所以用的是127.0.0.1:8000
    .fetch(
      `http://127.0.0.1:8000/login/status?cookie=${sessionStorage.getItem(
        "cookie"
      )}`,
      {
        headers: {
          Authorization: "Bearer test",
        },
        method: "GET",
        // *** 注意：get请求的参数值必须为字符串，不然tauri会报错，这是tauri框架的要求；可以自己手动进行字符串强制转换 ***
        params: {},
      }
    )
    .then((res) => {
      //   console.log('登录之后的状态'+res);
      sessionStorage.getItem("cookie");
      //   用户id   ？？？
      //   console.log(res.data.data.account.id, res.data.data.account.status);
      //   用户头像   昵称
      //   console.log(
      //     res.data.data.profile.avatarUrl,
      //     res.data.data.profile.nickname
      //   );

      sessionStorage.setItem("isLogin", res.data.data.account.status);
      sessionStorage.setItem("userid", res.data.data.account.id);
      sessionStorage.setItem("avatarUrl", res.data.data.profile.avatarUrl);
      sessionStorage.setItem("nickname", res.data.data.profile.nickname);

      // 0   豪先生5
      //   console.log(sessionStorage.getItem("isLogin"));
      //   console.log(sessionStorage.getItem("nickname"));
    });
};

//获取用户信息 , 歌单，收藏，mv, dj 数量
const getUinfo = () => {
  http
// http://127.0.0.1:8000这里填你服务器部署网易云api的ip地址，我在本地部署网易云api,所以用的是127.0.0.1:8000
    .fetch(
      "http://127.0.0.1:8000/user/detail?uid=" +
        sessionStorage.getItem("userid"),
      {
        headers: {
          Authorization: "Bearer test",
        },
        method: "GET",
        // *** 注意：get请求的参数值必须为字符串，不然tauri会报错，这是tauri框架的要求；可以自己手动进行字符串强制转换 ***
      }
    )
    .then((res) => {
      //   console.log("0000000");
      //   console.log(res);
      // console.log(res.data.data.code);
    });
};
onMounted(() => {
  // console.log(new Date().getTime().toString());
  getKey();
  //   document
  //     .getElementById("titlebar-minimize")
  //     .addEventListener("click", () => appWindow.minimize());
  document
    .getElementById("titlebar-close")
    .addEventListener("click", () => appWindow.close());
});
</script>


<style lang="scss" scoped>
.bbox {
  //   margin: auto;
  //   position: relative;
  width: 535px;
  height: 350px;
  background-color: #fff;
  border: #333 solid 1px;
}
.top {
  width: 534px;
  height: 50px;
  //   background-color: #2D2D2D;
  background-color: #fd544e;

  color: white;
  z-index: 3000;
}
.titlebar-button {
  padding: 0 15px;
}
.topp {
  font-weight: bold;
  //   margin-left: 18px;
  //   margin-right: 18px;
  //   padding-top: 16px;
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  padding-left: 20px;
  //   padding-right: 15px;
}
.ttt {
  display: flex;
  justify-content: space-between;
}
.mid {
  padding: 30px 30px 0 30px;
  display: flex;
}
.left img {
  width: 125px;
  height: 220px;
  margin-left: 20px;
}
.right {
  margin-left: 20px;
  display: flex;
  align-content: space-between;
  flex-direction: column;
}
.rightt {
  margin-left: 5px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  // width: 200px;
  // height: 24px;
  color: rgba(0, 0, 0, 0.4);
}
.rightb {
  margin-left: 15px;
}
.but {
  position: absolute;
  bottom: 0;
  margin-left: 10px;
}
.mid {
  margin-left: 50px;
}
.box{
  display: flex;
  justify-content: center;
  text-align: center;
}
</style>

效果：

手机扫描之后

手机确认之后