使用Vue（hash模式）开发微信公众号授权问题

描述

前段时间用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

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

学海无涯！努力二字，共勉！