vue.js 在微信JS-SDK中分享、微信支付、掃一掃等簽名失效的解決

jay_tian 發(fā)布于2019-07-01 10:25 / 2546人閱讀

摘要：處理自己的邏輯四重點(diǎn)來了，解決微信無效的問題使用的網(wǎng)友都知道，路由上帶有做路由的跳轉(zhuǎn)，而在發(fā)過去做微信驗(yàn)證的的時(shí)候，會(huì)被干掉，最終導(dǎo)致簽名無效。

一，先登陸微信公眾號(hào)后臺(tái)綁定js安全域名，不需要加http或https，詳情百度。 二、信公眾號(hào)后臺(tái)設(shè)置服務(wù)器的IP為白名單，否則無法獲取access_token，詳情百度 三、引入wx-js-sdk

1.使用script標(biāo)簽 http://res.wx.qq.com/open/js/...（支持https）引入；
2.如果使用vue-cli腳手架工具，可以先npm install weixin-js-sdk -s 加載依賴包
以下已腳手架為例
.vue 文件中 import wx from "weixin-js-sdk";

        getConfig(){    let that = this;
          this.$axios({
              url:that.api.shareUrl,//換成你實(shí)際請(qǐng)求的路徑
              method:"post",
              data:{
                  url:window.location.href //獲取當(dāng)前路徑，注意路徑一般不能寫死，請(qǐng)求簽名的路徑和最終調(diào)取wx-sdk路徑必須一致。
              }
          }).then(function (res) {
              let sign = res.data.data;//后端返回的微信的數(shù)據(jù)
              wx.config({
                  debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
                  appId: sign.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
                  timestamp: sign.timestamp, // 必填，生成簽名的時(shí)間戳
                  nonceStr: sign.nonceStr, // 必填，生成簽名的隨機(jī)串
                  signature: sign.signature, // 必填，簽名，見附錄1
                  jsApiList: [
                      "onMenuShareTimeline",
                      "onMenuShareAppMessage",
                      "hideMenuItems",
                      "showMenuItems",
                      "showAllNonBaseMenuItem",
                      "hideAllNonBaseMenuItem",
                      "startRecord",
                      "stopRecord",
                      "onVoiceRecordEnd",
                      "uploadVoice",
                      "downloadVoice",
                      "playVoice",
                      "onVoicePlayEnd",
                      "pauseVoice",
                      "stopVoice",
                      "openLocation",
                      "getLocation",
                      "chooseWXPay",
                      "onMenuShareQQ",
                      "scanQRCode",
                  ], // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
              });
          }).catch(function (err) {
              
          })
        };
        初始化完成，以調(diào)起微信掃一掃為例
            scan(){
            let that =this;
            wx.ready(function() {
                wx.scanQRCode({
                    needResult : 1, // 默認(rèn)為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果
                    success : function(res) {
                        var data = res.resultStr; // 當(dāng)needResult 為 1 時(shí)，掃碼返回的結(jié)果
                        var result  =data.split(",")[1];//返回的結(jié)果是碼的類型+‘,’+內(nèi)容，所以要以數(shù)組分割取第二個(gè)。
                      //處理自己的邏輯
                         
                    }
                });
            })
        }

四、重點(diǎn)來了，解決微信signature無效的問題

使用vue-router的網(wǎng)友都知道，路由上帶有#做路由的跳轉(zhuǎn)，而#在發(fā)過去做微信驗(yàn)證的signature的時(shí)候，#會(huì)被干掉，最終導(dǎo)致簽名無效。例如你的路徑是 www.a.com/#/scan 拿去簽名，#被干掉以后，你使用www.a.com/#/scan，做wx.config signature是無效的。很多人都知道要使用vue的history模式。
// 路由配置

const RouterConfig = {
    mode: "history",
    routes: routers
};

例如你的域名是www.a.com，你的文件部署在根目錄下，首頁正常訪問，使用頁面內(nèi)部調(diào)整路由，如菜單等，沒問題。但是一旦你直接訪問www.a.com/scan，或者從首頁菜單跳轉(zhuǎn)到www.a.com/sacn然后刷新本頁，你會(huì)發(fā)現(xiàn)返回404。
以下以nginx為例分析這個(gè)問題，你訪問www.a.com，nginx請(qǐng)求到根目錄下index.html，沒問題，頁面上使用菜單做跳轉(zhuǎn)頁沒問題，但是一旦你直接訪問www.a.com/scan，或者刷新www.a.com/scan,nginx找不到scan這個(gè)文件夾，所以返回404
so，配置 mode: "history",還需要nginx配置配合。訪問不到文件夾的時(shí)候，

location / {
            if (!-e $request_filename){
                rewrite ^/(.*) /index.html last;
            }
          }

直接回到你的index.html并把參數(shù)帶回來。解決所有問題

如果你的項(xiàng)目不是部署在根目錄怎么辦？
假如你的項(xiàng)目部署的目錄是 /test/
vue router 的配置為

const RouterConfig = {
    mode: "history",
    base:"test",
    routes: routers
};

nginx的配置為

 location /test/ {
    if (!-e $request_filename){
                rewrite ^/(.*) /test/index.html last;
            }
}

GPU云服務(wù)器云服務(wù)器 js 微信掃一掃微信支付簽名錯(cuò)誤微信js-sdk 掃一掃js

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/29154.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

jay_tian

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

云主機(jī)能夠做什么-云主機(jī)能做什么？

閱讀 1255·2021-09-22 15:24
anchor-link-with-fixed-header

閱讀 2351·2019-08-30 15:44
Spring Boot + Mybatis + Shiro 后臺(tái)權(quán)限管理系統(tǒng)

閱讀 2730·2019-08-30 10:55
拓端數(shù)據(jù)tecdat:DT模型打好用戶流失預(yù)防針——電信客戶流失淺析

閱讀 3417·2019-08-29 13:25
CSS教你玩轉(zhuǎn)背景background-position（1）

閱讀 1710·2019-08-29 13:09
React組件中的constructor和super

閱讀 1456·2019-08-26 14:05
React 項(xiàng)目結(jié)構(gòu)和組件命名規(guī)范

閱讀 1480·2019-08-26 13:58
前端學(xué)習(xí)筆記之this——懂不懂由你，反正我是懂了

閱讀 2049·2019-08-26 11:57

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

vue.js 在微信JS-SDK中分享、微信支付、掃一掃等簽名失效的解決

相關(guān)文章