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

2021-12-26  本文已影响0人  kevision

开发前必读:
网页授权: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)
                }
            })
        }
上一篇下一篇

猜你喜欢

热点阅读