使用Vue（hash模式）開發微信公衆號授權問題

描述

前段時間用vue開發一個公衆號的項目，在項目開發中遇到了一些問題，一直沒有時間整理，趁着這個時間點，把項目中遇到的問題整理，積累下。

描述
微信公衆號，最重要的，也是最關鍵的就是授權問題，必須要做的，繞不開。
我這邊大概的流程是首先看用戶數據有沒有，如果沒有的話先微信發起授權，拿取到微信返回的code值，然後返回給後端

上代碼

首先，新建了一個js文件，把請求code的方法和解析鏈接上code的方法抽離到這個文件裏面

export default {
    // 請求微信服務器獲取code 方法
    getUserCode() {
        let baseurl = '你們的域名'
        // 這裏做一下轉譯，要不然微信會忽略到#後面的參數
        let redirectURL = encodeURIComponent((baseurl + window.location.pathname + window.location.search).split('&code')[0]); //獲取地址
        const base = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=';
        let appid = '公衆號的AppID';
        //應用授權作用域
        let scope = 'snsapi_userinfo';
        window.location.href = base + appid + '&redirect_uri=' + redirectURL + '&response_type=code&scope=' + scope + '#wechat_redirect';
    },

    // 解析鏈接的code
    getCode() {
        var url = location.search; //獲取url中"?"符後的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            var strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest.code;
    }
}

做微信公衆號授權，根據需求來，我這邊的話，利用了vue-router的全局導航守衛。
大致的思路是在頁面跳轉的時候，檢查本地有沒有用戶數據，有的話就釋放路由，沒有的話的，看看當前鏈接是否攜帶code值，沒有的話，就發起微信授權獲取code值，有的話就解析出當前的code，把這個code給後端。
大致的代碼邏輯整理了一遍，寫在router文件裏

import login from '上個文件的路徑'
// 路由變化時
router.beforeEach((to, from, next) => {
    // 在開發生產環境下  這裏也可以用環境變量來實現，會更好一些
    if (document.domain == "192.168.31.118") {
        // ..代碼
        next();
        return
    }

    // 讀取本地用戶數據，判斷登錄狀態，是否要發起授權
    var userAll = JSON.parse(sessionStorage.getItem('userAll'))

    if (userAll) {
        next(); //釋放路由 如果已經登錄
    } else if (userAll == '' && document.domain != "192.168.0.107") {
        // 未登錄 且不是在測試環境下

        //獲取url 上面的code，判斷是否授權過
        const code = login.getCode();

        // 還未完成微信授權
        if (!code) {
            //假如沒code，發起授權，請求微信服務器獲取code
            sessionStorage.setItem('userAll', '123');
            login.getUserCode();
        }

        //  假如已經獲取到了code，就是已完成微信授權
        if (code) {
            // 這裏拿到code後，就可以給後端了，後端拿到這個code做他們的事情去了
        }
    } else {
        next();
    }
});

微信公衆號其實就是H5頁面，只不過這個頁面要跟微信打交道，要用到微信的東西，但是前端做的不多，獲取到code給後端就好了。其他的我們不要過多考慮。至於你做授權時要考慮的一些場景和業務需要的話，就需要做不同的判斷了，我這個是最基礎的，只能算一個簡版。提供下思路。
最後，可以看下官方文檔，就看這一個點就行了，後面不是前端的工作。
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#0

個人水平有限，有問題歡迎大家留言指導，僅供學習和參考。

學海無涯！努力二字，共勉！