vue版本微信公众号/服务号授权处理方法记录

该项目就一个页面，用来办理VIP会员的，但是有一句话说的好，麻雀虽小五脏俱全，该授权该缓存该异步该处理的一样都不能少

首先要弄清楚为什么授权，为了获取用户信息，不让用户手动注册，直接拿用户的微信号对应的数据作为依据

OK，弄清楚为什么授权之后，接下来开始操作：

两个页面，一个是公众号办理VIP的页面，一个是授权使用页面(也可以不要，使用其他方式，这里用的专门授权页面 auth.vue)

写一个全局前置守卫，下方用到了一些自定义的方法，可以自行查看：【utils/storage自定义封装】【动态title】

import router from './index'
import { getItem, setItem, removeItem } from '@/utils/storage'
import { changeTitle } from '@/commons/func' //引入动态title
router.beforeEach((to, from, next) => {
    // setItem("openid",1) //测试
    let openid = getItem('openid');
    if(openid){ //有openid
        // if(to.meta.title){
        //     changeTitle(to.meta.title)
        // }
        next()
    }else{ //无openid
        if(to.path === '/auth'){ //本身就是去授权页，不处理
            next();
        }else{ //去的其他页面 要先去授权
            //setItem('now_url',to.fullPath) //记录一下要去的地址，我们项目没用到，只是提示一下，如果需要可以在这儿记录一下
            next('/auth');
        }
    }
})
router.afterEach((to,from)=>{
})

<template>
    <div class="auth">授权中...</div>
</template>

<script>
// const url = localStorage.getItem("now_url"); // 如果没有的话可以做个默认值处理,这里没有用到，只是提示一下可以在这儿用或者自行找时机使用

export default {
    //生命周期函数
    created() {
        document.title = '授权页';
        const code = this.GetUrlParame("code"); // 截取code，授权返回的code
        let appid = this.$store.state.appid; // 可以通过后台获取
        let appsecret = this.$store.state.appsecret; //可以通过后台获取

        if (!code) {
            //没有code
            let authPageBaseUri =
                "https://open.weixin.qq.com/connect/oauth2/authorize";
			//这里的 redirect_uri 用的当前页面地址，记得用 encodeURIComponent 做一下编码，这儿不注意容易报错
            let authParams = "";
            authParams = `?appid=${appid}&redirect_uri=${encodeURIComponent(
                window.location.href.split("#")[0] + "#" + this.$route.fullPath
            )}&response_type=code&scope=snsapi_base&state=ceshi#wechat_redirect`;
            window.location.href = authPageBaseUri + authParams;
            
        } else {
            //有code 拿到code去后台换数据 token openid等
            let params = {};
            params.code = code;
            params.appid = appid;
            params.appsecret = appsecret;
            this.$axios
                .post(this.$api.findwxuser, params) //如果有code，说明用户点击了授权  将获取到的code传递给后台
                .then(res => {
                    if (res.data.code_status == 0) {
                        this.$storage.setItem("openid", res.data.data.openid);
                        this.$router.replace('/index'); // 用的 replace 不让用户点击返回按钮返回授权页面
                    }
                });
        }
    },
    data() {
        return {};
    },
    methods: {
        // 截取code
        GetUrlParame(parameName) {
            /// 获取地址栏指定参数的值
            // 获取url中跟在问号后面的部分
            var parames = window.location.search;
            // 检测参数是否存在
            if (parames.indexOf(parameName) > -1) {
                var parameValue = "";
                parameValue = parames.substring(
                    parames.indexOf(parameName),
                    parames.length
                );
                // 检测后面是否还有参数
                if (parameValue.indexOf("&") > -1) {
                    // 去除后面多余的参数, 得到最终 parameName=parameValue 形式的值
                    parameValue = parameValue.substring(
                        0,
                        parameValue.indexOf("&")
                    );
                    // 去掉参数名, 得到最终纯值字符串
                    parameValue = parameValue.replace(parameName + "=", "");
                    return parameValue;
                }
                return "";
            }
        }
    }
};
</script>

<style lang="less" scoped>
.auth {
    text-align: center;
    font-size: 64px;
    padding-top: 120px;
}
</style>