微信網頁受權實現方法

有關微信網頁受權

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 ；