適配開發者工具

企業微信公眾號、微信公眾號本質相同，因為我在開發企業號，所以拿企業號為例
首先新增企業應用

然後進入改應用，配置主頁、網頁授權及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) // 返回介面返回的錯誤資訊
    }
)