vue3 H5页面微信公众号静默授权实现方案

2022-10-28 10:28:49

在传统MVC模式下都后端实现微信授权的的。后端跳转到微信公众号接口获取CODE再通过CODE换取openid等信息。

VUE3前端是采用前后分离方式所以这个公众号授权就得前端完成了。微信公众号登录授权分为静默方式和用户点击同意方式两种。

两种方式换回CODE后能获取不同的内容具体可以参考微信公众号开的手册。

实现用户点击一个需要登录的页面然后跳转到登录页发起微信公众号授权登录,登录完之后返回用户点击的页面。

所以跳转login路径时加了一个参数 redirect。

通过VUE3的路由获取来路地址,在系统中点击需要登录的的页面是能获取到来路路径的。

而在发起授权登录后返回的路径是取不到来路地址的

发起微信公众号授权登录时的返回地址带上redirect。

redirect的参数就是来路地址

这里定义一个返回就是在授权登录后返回的路径。

const back = route.redirectedFrom ? route.redirectedFrom.fullPath : route.query.redirect

授权完成后

在完成授权后微信公众号会能过redirect_uri返回一个code

判断到有code时则带上code去后端请求换取token并把token存到本地。后面的请求都带上token

 if(code!=''){
            dologin(code)
    }else{
            location.href=data.url
  }

login.vue完整代码

<script>
import { reactive, ref, toRefs } from "vue";
import { useRoute } from "vue-router";
import { login } from "@/api/login";
import { setToken } from "@/utils/auth";
function urlencode (str) {  
    str = (str + '').toString(); 
    return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').  
    replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');  
}
export default {
    setup() {
        const data = reactive({
            code:'',
            url:'',
        });
        const appid='这里写APPID'
        const route = useRoute();
        const code = route.query.code || '';
        const back = route.redirectedFrom ? route.redirectedFrom.fullPath : route.query.redirect
        if(back){
            let backurl=urlencode('https://t.pcwap.cn/login?redirect='+back);
            data.url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${backurl}&response_type=code&scope=snsapi_base&state=STATE`;
        }
        const dologin = (code) => {
            login({
               code:code
            }).then((res) => {
                console.log(res);
                setToken(res.token)
                location.href=back
            });
        };
        if(code!=''){
            dologin(code)
        }else{
            location.href=data.url
        }
        return {
            dologin,
            ...toRefs(data),
        };
    },
};

</script>
<template>
<span>登录中</span>>

</template>

还不明白可以加微信交流:q476905668(注明来意)