微信网页授权实现方法

有关微信网页授权

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 ；