vuejs实现微信JSSDK获取网页授权以及接口授权遇到的坑

vuejs实现微信JSSDK获取网页授权以及接口授权遇到的坑

一、代码生成的签名与微信签名测试得出的签名不一致，返回信息invalid signature： invalid：

signature签名错误建议按如下顺序检查： (1)确认签名算法正确，可用
http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
(2)确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr,
timestamp一致。
(3)确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认)，包括’http(s)?/‘部分，以及’？‘后面的GET参数部分,但不包括’#‘hash后面的部分。
(4)确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
(5)确保一定缓存access_token和jsapi_ticket。
(6)确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#‘hash部分的链接（可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

具体可参考：https://www.jianshu.com/p/341e80e21383/
但是，我的问题好像是因为vuejs引用的库不一样导致的，之前一直用的是sha1,但是经过百度查找文档之后发现用js-sha1才行得通，测试之后结果是成功的；

二、本地请求https://api.weixin.qq.com 的跨域问题：
因为只是个小练习，并没有做得很复杂，只是在有src的目录的/config/index.js中（proxyTable）：

 dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    host: 'localhost',
    port: 8080,
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,
    useEslint: true,
    showEslintErrorsInOverlay: false,
    devtool: 'cheap-module-eval-source-map',
    cacheBusting: true,
    cssSourceMap: true,
    proxyTable: {
      '/api': {
        target: 'https://api.weixin.qq.com', // 第三方接口
        secure: false, //是有https才填写
        changeOrigin: true, // 是否允许跨域
        pathRewrite: {
          '^/api': ''   // 重写
        },
      },
    }
  },

三、微信web开发者工具

可参考：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140