描述

前段时间用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
在这里插入图片描述

个人水平有限,有问题欢迎大家留言指导,仅供学习和参考。

学海无涯!努力二字,共勉!

Logo

前往低代码交流专区

更多推荐