美文网首页
公众号h5页面微信授权(个人笔记)

公众号h5页面微信授权(个人笔记)

作者: kevision | 来源:发表于2021-12-26 16:38 被阅读0次

    开发前必读:
    网页授权:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

        beforeRouteEnter(to, from, next) { // 本地测试在开发者工具域名要换成localhost
            let params = location.href.split('?')[1]
            let code = qs.parse(params).code
            let token = store.getters.h5_AccessToken
            if(token) {
                next()
            } else {
                if (!code) { // 未授权
                    let uri = encodeURIComponent(env.redirect_uri) // hash模式#后面的会被放到url最后
                    // 跳转路径去掉state, 用户拒绝授权可以重新调起授权!!!
                    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${env.appid}
                                            &redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo#wechat_redirect`;
                } else { // 已授权
                    next(vm => {
                        vm.handleLogin(code) // beforeRouteEnter访问不到this, 在next里面这样访问
                    })
                }
            }
        }
    
            handleLogin(code) {
                this.$axios.jsCodeLogin({
                    jsCode: code
                }).then(res => {
                    if(res.data.data.loginSuccess) {
                        setAccessToken(res.data.data.accessToken)
                        setUserInfo(res.data.data.clientUser)
                    }
                })
            }
    

    相关文章

      网友评论

          本文标题:公众号h5页面微信授权(个人笔记)

          本文链接:https://www.haomeiwen.com/subject/nzlpwltx.html