解决vue的history模式微信jssdk授权认证在ios上失败问题

黄良钵

分类: 程序开发 316 0

本篇方案适用于vue 的 history模式,hash模式不适用!

使用spa模式的vue的 history 路由模式,在ios上加载微信jssdk授权认证出现失败问题。由于ios只记录第一次进来的url,在其他页面调用config授权不能使用window.location.href 做为认证url。

需要做的是如果在ios下,记录第一次进来时的url,调用config时用储存好的url调用

首先在 router 中添加 afterEach

import { config } from './utils/wx';
router.afterEach((to, from) => {        //     伸手党福利
  // window.__wxjs_is_wkwebview
  // true 时 为 IOS 设备
  // false时 为 安卓 设备 安卓默认使用to.fullPath
  let url = to.fullPath
  if (window.__wxjs_is_wkwebview) {  // IOS
    // 第一次进来记录url window.entryUrl 自定义window对象
    if (window.entryUrl == '' || window.entryUrl == undefined) {
      window.entryUrl = to.fullPath    // 将后面的参数去除
      url = to.fullPath
    }else {
    // 后续进来直接使用第一次保存的url
      url = window.entryUrl
    }
  }
  config(url)  // 封装的微信config方法 传入url 

})
// ./utils/wx.js
import { config as configWeChat } from '@/api/WeChat' // 后端接口
import { getToken } from './auth'
import { Toast } from 'vant'

/**
 * 通过config接口注入权限验证配置 接受url
 */
export function config(url) {
    return new Promise(async (res, rej) => {
        // 接口请求获取config签名数据
        const { data } = await configWeChat({
            token: getToken(),
            url: window.location.protocol + '//' + window.location.host + url  // 获取协议 + '//' + 网站域名 + 传入域名 拼接成完整url
        })
        wx.config({
            debug: false,
            appId: data.appId, // 必填,公众号的唯一标识
            timestamp: data.timestamp, // 必填,生成签名的时间戳
            nonceStr: data.nonceStr, // 必填,生成签名的随机串
            signature: data.signature, // 必填,签名
            jsApiList: ['updateAppMessageShareData','updateTimelineShareData','scanQRCode', 'chooseWXPay'] // 必填,需要使用的JS接口列表
        })
    })
}

/**
 * 通过ready接口处理成功验证
 */
export function ready(jsApiList) {
    if (!jsApiList) return
    return new Promise(async (result, rej) => {
        wx.ready(function () {
            // config信息验证成功后会执行ready方法,所有接口调用都必须在config接口获得结果之后
            // config 是一个客户端的异步操作,所以如果需要在页面加载时调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发是才调用的接口,则可以直接调用,不需要放在ready函数中
            wx.checkJsApi({ // 判断当前客户端版本是否支持指定JS接口
                jsApiList: jsApiList,
                success: function (res) { // 以键值对的形式返回,可用true,不可用false。如:{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
                    for (const key in res.checkResult) {
                        if (res.checkResult.hasOwnProperty(key)) {
                            const element = res.checkResult[key];
                            if (element === true) {
                                result()
                            } else {
                                rej()
                            }
                        }
                    }

                },
                fail: function (res) { // 检测getNetworkType该功能失败时处理
                    console.log(res)
                    rej('fail' + res)
                    Toast('fail' + res)
                }
            })
        })

        /* 处理失败验证 */
        wx.error(function (res) {
            // config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
            rej('配置验证失败: ' + res.errMsg)
            Toast('配置验证失败: ' + res.errMsg)
        })
    })
}
// 使用扫一扫
methods: {
    // 扫一扫
    async scanQRCode() {
        ready(["scanQRCode"])
            .then(res => {
                wx.scanQRCode({
                    needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
                    success: async res => {
                        var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
                        console.log("扫描结果", result);
                    }
                });
            })
            .catch(err => {
                this.$toast.fail("抱歉,当前客户端版本不支持扫一扫");
            });
    },
}

文章部分来自 VUE解决微信签名,SPA微信invalid signature问题,完美处理

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
history、iOS、Vue、微信jssdk、微信公众号

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “解决vue的history模式微信jssdk授权认证在ios上失败问题”

Loading...