企業微信公眾號本地調試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解壓即可，包含前后端代碼