适配开发者工具
企业微信公众号、微信公众号本质相同，因为我在开发企业号，所以拿企业号为例
首先添加企业应用
然后进入改应用，配置主页、网页授权及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解压即可，包含前后端代码
