微信公众号授权登录Vue H5项目并指定跳转到某一个页面进行操作（即通过微信授权登录获取url上的code，调用后台接口获取access_token）

前言

最近有一个需求是：盘点待审批状态，需要用微信公众号推送消息给审批人员，让其在微信中审批。因此就需要：通过微信的网页授权（即：微信公众号授权登录Vue H5项目并指定跳转到某一个页面进行操作）

前提准备

1、 官方文档地址

https://open.weixin.qq.com/connect/oauth2/authorize?appid=自己公众号openid&redirect_uri=授权后重定向的回调链接地址(即需要调跳转的H5页面)&response_type=code&scope=snsapi_userinfo&state=123(url参数)#wechat_redirect
注释：

注意：跳转回调redirect_uri，必须是https开头

2、微信公众号需要配置以下：

具体步骤

逻辑思路：
判断token是否存在（即判断是否已经登陆H5项目）

1、如果已登陆，就直接跳转页面。
2、如果没有登陆，就要进行授权登录并重置token。

在H5项目新建一个wxh5页面(此页面是白名单——即未登录也可以进入)

<template>
  <div class="wx-h5">
    <van-loading type="spinner" color="#1989fa" vertical>页面跳转中...</van-loading>
  </div>
</template>
<script>
import { setToken } from '@/utils/auth'
export default {
  name: 'WXh5',
  data() {
    return {
      code: '',
      id: '' // 盘点单id
    }
  },
  mounted() {
    console.log('获取url参数', this.getUrlCode())
    this.code = this.getUrlCode().code
    this.id = this.getUrlCode().state
    this.checkLogin()
  },
  methods: {
    // 审核页登录授权
    async getWxLogin() {
      const res = await this.$api.getWxLogin(this.code)
      if (res.success) {
        console.log('存储token', res.data)
        setToken(res.data)
        // 存储token
        if (res.data) {
          this.$router.push({
            path: '跳转路由地址',
            query: { addTitle: '盘点', id: this.id, type: 'wx' }
          })
        }
      }
    },
    // 判断是否登录
    async checkLogin() {
      const res = await this.$api.checkLogin()
      if (res.success) {
        console.log('是否登录', res.data)
        if (res.data) {
          console.log('跳转审批')
          this.$router.push({
            path: '跳转路由地址',
            query: { addTitle: '盘点', id: this.id, type: 'wx' }
          })
        } else {
          this.getWxLogin()
        }
      }
    },
    // 获取url中的code方法
    getUrlCode() {
      // 截取url中的code方法
      const url = location.search
      // eslint-disable-next-line no-new-object
      const theRequest = new Object()
      if (url.indexOf('?') != -1) {
        const str = url.substr(1)
        const strs = str.split('&')
        for (let i = 0; i < strs.length; i++) {
          theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1]
        }
      }
      return theRequest
    }
  }
}
</script>

<style lang="scss">
.wx-h5 {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.1);
}
</style>

相关文章

基于ElementUi再次封装基础组件文档

---

基于ant-design-vue再次封装基础组件文档

---

vue3+ts基于Element-plus再次封装基础组件文档