微信網頁授權實現方法

有關微信網頁授權

let wechat = {
    getCode:function(appids){
        /**
         * 獲取微信code
         */
        let appid = appids;
        let href = window.location.href;
        let redirect_uri = encodeURI(href.split("#")[0]);
        redirect_uri = redirect_uri.replace(/&/g, '%26');
        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri+"&response_type=code&scope=snsapi_userinfo&state=abcdefghigklmnopqrstuvwxyz#wechat_redirect";
    },
    getUrlStr : function(name){
        /**
         * 獲取地址欄參數
         *
         *
         */
        let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)","i");
        if(reg.test(window.location.href)){
            return unescape(RegExp.$2.replace(/\+/g," "))
        }
        return undefined
    }
}

export default wechat;

 

第一步：用戶同意授權，獲取code：
　　通過調用 wechat.getCode()；方法 將微信公眾號的appid 傳入，引導用戶進去微信授權頁面，需要注意的是 redirect_uri 就是當前頁面地址， scope 的參數有兩種，官網寫的很詳細，我主要用的是 snsapi_base這種授權方式。需要注意的是 如果是用 vue 的 hash 模式會存着# 號，
微信在授權的時候回把#號干掉，所以需要注意一下。
第二步：通過code獲取APPID：
　　經過授權，微信會回跳到 redirect_uri 地址，這是鏈接上會增加code=“***”一串參數，通過 wechat.getUrlStr（code）就可以獲取到微信傳過來的code參數，然后將code傳到后台，后台通過code 進行計算，會得到微信用戶的APPID；然后再返回APPID給前端。
以上兩步就完成微信的授權，然后拿到微信用戶的APPID。

需要注意的是，code是有失效性的，只能用一次，第二次再用相同的code傳給后台，后台是拿不到APPID的，所以，在進去入頁面的時候需要判斷是否通過了授權，然后再判斷時候需要再次授權。

這是可能會用到存localStorage，以下函數可以給存儲加一個時效，就和存cookie類似。

localStore: function (key, data, expires) {
        /**
         * 基於本地存儲的緩存模塊
         *
         * @param {String} key 鍵名
         * @param {any} data 數據
         * @param {Number} expires 有效期(秒), 0永久
         * @returns {any}
         *
         * 使用例子：
         * localStore('aaa', { a: 1 }); // 永久存儲
         * localStore('bbb', { b: 2 }, 3); // 存儲3秒
         *
         * setTimeout(function() {
         *     console.log(localStore('aaa'), localStore('bbb')); // {a: 1} {b: 2}
         * }, 1000);
         *
         * setTimeout(function() {
         *     console.log(localStore('aaa'), localStore('bbb')); // {a: 1} undefined
         * }, 4000);
         */
        const localStorage = window.localStorage;
        // 不兼容返回空
        if (!localStorage) {
            return undefined;
        }
        let now = +new Date(); // 當前時間戳
        // 有值則存儲數據
        if (data) {
            let storeData = {
                data: data,
                expires: 0 // 有效期
            };
            if (expires) {
                storeData.expires = now + expires * 1000; // 到期時間戳
            }
            // 無法存入情況
            try {
                return localStorage.setItem(key, JSON.stringify(storeData));
            } catch (er) {
                // 不做處理統一返回
            }
        } else {
            // 獲取數據
            try {
                let storeData = JSON.parse(localStorage.getItem(key));
                if (storeData.expires === 0 || now <= storeData.expires) {
                    return storeData.data;
                }
                return localStorage.removeItem(key); // 清理過期數據
            } catch (er) {
                // 不做處理統一返回
            }
        }
        return undefined;
    }

使用方法    localStore('bbb', { b: 2 }, 3);  這是存數據，

取數據  localStore（bbb“”） 如果在設置的時間內，那就直接返回的存的數據，如果過了時間就會直接返回 undefined ；