企业微信公众号本地调试auto2.0

适配开发者工具

企业微信公众号、微信公众号本质相同，因为我在开发企业号，所以拿企业号为例
首先添加企业应用

然后进入改应用，配置主页、网页授权及JS-SDK、企业微信授权登录
注意企业微信不允许配置localhost类型的地址
所以我的地址如下：
主页：http:///dshvv.xiaomiqiu.com
网页授权js-sdk: dshvv.xiaomiqiu.com
企业微信授权登录: dshvv.xiaomiqiu.com

但是要又要本地调试，但是这边地址又必须是正式域名。那怎么处理呢？
我用的是内网转发 ngrok。通过内网转发技术将本地的服务映射到正式域名上。
这样访问正式的地址，来实时访问本地代码
我这边使用技术是小米球（因为花生壳太贵了）

关于auth2.0认证

前端拿auth2给的code给后端，用来换取token。
这个token是后端写入到cookie中的
然后以后每次请求浏览器都会自动带上这个包含token的cookie。
如果token过期，则会返回401
前端则要重新获取code用来刷新token（这里不考虑code没过期，而token过期，不要搞这么复杂）

技术难点

后端cookie写入到小程序开发工具中

前端和后端是两个服务，最好都代理到同一个顶级域名上，这样方便后端将coockie写入到客户端。
具体办法如下：
a、小米球代理前端和后端
其中page是我启动的本地前端服务，serve是我启动的后端服务。将其分别代理到了 dshvv.xiaomiqiu.com、dshvv1.xiaomiqiu.com

tunnels:
    page:
        remote_port: 80
        subdomain: dshvv
        proto:
            http: 127.0.0.1:8080
    serve:
        remote_port: 80
        subdomain: dshvv1
        proto:
            http: 127.0.0.1:7777

b、然后再将后端设置cookie的domain为顶级域名 xiaomiqiu.com

String token = otherService.login(code);
Cookie cookie = new Cookie("token",token);
cookie.setHttpOnly(true);
cookie.setDomain("xiaomiqiu.com");
response.addCookie(cookie);

前端鉴权无效后的操作

（spa下，无论从哪个路由进入）在首次进入应用时，或者再遇到返回401时，需要要anth2.0一下，然后拿token。
为优化体验，我们要处理哪里失效，auth2.0之后还要回到这个页面。不能跳转到首页。所以我们auth2.0的重定向地址为刷新code之前即当前url。
所以前端核心代码如下：
utils.js

 /**
 * 登录失效，重新登录并回来
 */
 export const loginCurrent = ()=> {
  const redirect_uri = encodeURIComponent(`${location.origin}${location.pathname}`);
  console.log(redirect_uri);
  const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=应用id&redirect_uri=${redirect_uri}&response_type=code&scope=SCOPE&state=STATE#wechat_redirect`;
  location.href = url;
}

main.js

const code = getUrlQuery("code"); //从url中获取参数code
// 进来有code，直接用最新的code更新token
if (code) {
  axios.get(`http://dshvv1.xiaomiqiu.com/login?code=${code}`).then((res) => {
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
  })
} else {
  loginCurrent();
}

axios.config.js

import axios from 'axios';
import { loginCurrent } from '.';
// http response 拦截器
axios.interceptors.response.use(
    response => {
        //拦截响应，做统一处理 
        if (response.data.status === 401) {
            console.log('登录超时,即将重新登录（将会自动刷新页面一下）');
            loginCurrent();
        }
        return response
    },
    //接口错误状态处理，也就是说无响应时的处理
    error => {
        return Promise.reject(error.response) // 返回接口返回的错误信息
    }
)

源代码

因为博客园上传文件麻烦，故而将文件隐藏到图片中，下载图片之后将后缀名改为zip解压即可，包含前后端代码