开发公众号的登录逻辑

不管是写公众号还是写小程序时都涉及到一个登录逻辑。那么我的登录逻辑大概是不管页面进入哪个页面，先调用用户信息接口，当返回token过期或不存在token的情况，token过期的话就在响应拦截器中将token值清除掉。接着就会涉及到去拿code,从而拿到openid或者token值。

后端提供：appid  回调地址

1.进行授权需了解这篇文章：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html。

配置好链接

 

2.在你需要拿code的地方

// 拿到code
            getCode() {
                //获取当前页面的url
                let link = window.location.href;
                console.log('我是请求的url')
                console.log(link)
                // let link = 'http://xxxxxx.com/?code=001vGk&state=123#/';
                let code = null;
                // 判断link中有没有code=字符串，  
                if (link.indexOf('code=') == -1) {
                    console.log('我是需要授权页的判断')
                    //没有code= 发请求
                    let appid = '你自己的appid'; // 公众号的固定appid
                    let uri = encodeURIComponent(link); // 编码后的回调地址
                    let authURL =
                        `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`; 
                   //url应该是后端提供的一个线上地址                
                    window.location.href = authURL;
                } else {
                    console.log('我是授权成功后跳转的页面')
                    let temp = decodeURIComponent((new RegExp('[?|&]' + 'code' + '=' + '([^&;]+?)(&|#|;|$)').exec(link) ||
                        [, ''])[1].replace(/\+/g, '%20')) || null
                    //  回调函数已经执行 返回的链接存在code= 地址解析
                    this.code = temp;
                    console.log('我是code的值')
                    console.log(this.code)
                }
            },

 

 3.拿到token后即可调取静默登录接口

注意：

    let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`; 
                   //url应该是后端提供的一个线上地址   
其中的redirect_uri会强制重定向到你给的地址，测试时应该在微信开发者工具中测试。