微信公众号h5页面实现授权，前端部分

天马行空zqzq

已于 2023-07-18 15:35:39 修改

阅读量1.3k

点赞数

文章标签：微信前端 javascript vue.js

于 2023-07-18 15:31:18 首次发布

本文链接：https://blog.csdn.net/qq_42039912/article/details/131788524

版权

授权步骤：

①微信开发工具上配置公众号的apiId....

②微信环境内调起微信的授权功能

代码实现（此段代码放在app.vue的监听函数中，每当路由发生变化，都会判断此页面是否已授权，没授权的话则进行授权）：

watch: {
        $route: {
            handler: function(val, oldVal){
                // 这个变量用来存储不希望被授权的页面路由
                const unwantedAuthPage = ['/home']
                
                const { fullPath } = val

                const info = JSON.parse(localStorage.getItem('wx_user_info')) // 获取授权信息
                const {
                    code, // 授权微信返回的code
                } = getUrlParams()

                const appid = '微信开发者工具上申请的appid'.slice(0, 6) // appid前六位
                // 微信端且需要授权的页面要判断授权
                if (isWeiXin && val !== '/' && !unwantedAuthPage.includes(fullPath)) {
                    if ((!info?.openid && !code) || (info?.appid !== appid && !code)) { // 如果本地没有openid，并且链接中没有授权的code, 就进行授权
                        const tempAppId = '微信开发者工具上申请的appid'
                        this.doAuth(tempAppId)
                    } else if (code && code !== info?.code) { // 链接有code,并且和存储的code不同，表示重新授权了
                        const tempUrl = '后端给的授权接口，传code之后获取用户openid等信息'
                        request({
                            url: `${tempUrl}${code}`,
                            method: 'get',
                        }).then(result => {
                            const res = result.data
                            const save = { ...res, code, appid }
                            // 将后端返回的用户信息存本地，在之后的请求中可以将openid放请求头中传给后端，以验证身份
                            localStorage.setItem('wx_user_info', JSON.stringify(save))
                        })
                    } else {
                        
                    }
                } else {
                   
                }
            },
        }
    },

doAuth函数封装：

 // 授权
doAuth(appid) {
     const url = encodeURIComponent(window.location.href)
      window.location.replace(`
                https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo#wechat_redirect
       `)
},

isWeiXin函数封装

// 判断是否是微信浏览器的函数
export const isWeiXin = (() => {
    // window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
    const ua = window.navigator.userAgent.toLowerCase()
    // 通过正则表达式匹配ua中是否含有MicroMessenger字符串
    if (ua.match(/MicroMessenger/i)) {
        return true
    }
    return false
})()