vue实现绑定微信登录全过程

这篇具有很好参考价值的文章主要介绍了vue实现绑定微信登录全过程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、需求说明

通过vue绑定微信登录，首次进入获取code，通过code获取openId查用户，然后进行登录，第二次进入若绑定过微信，直接登录进入主界面，若没绑定过微信，则跳转到登录页面。

二、准备工作

（1）开通微信公众号的相关功能

vue实现绑定微信登录全过程
测试账号会有appID和appsecret,记住这两个，后续会用到

填写js接口安全域名，这里填的就是你的服务器接口访问地址

这里先填自己本机的地址，记住不要加http等协议，端口号是你项目的端口号，例如我的项目端口号是8368
vue实现绑定微信登录全过程

（2）其他准备工作

redirect_uri和appid

appid就是你测试号类里面的appId
redirect_uri是自己配置的，比如你想访问http:192.168.1.117:8080/zy/project/index.html,那么你的redirect_uri可以就写成这个，那么这个地址下面的网页都可以访问
当你用浏览器访问https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxxxxxxxxxx&redirect_uri=xxxxxxxxxxx&response_type=code&scope=snsapi_base#wechat_redirect这个链接的时候，会提示请在微信客户端打开，这个时候需要用微信开发者工具打开，在地址栏中输入这个链接，就可以了，成功访问后，会跳转到你redirect_uri重定向到的那个页面，并且地址栏中还会多了一个code，这样显示就说明成功获取到了code

scoped参数错误或者没有scoped权限

出现这个错误可以查一下你的redirect_uri填写是否正确，看一下微信公众平台的网页账号授权域名填写是否正确，看一下js接口安全域名填写是否正确文章来源地址https://www.toymoban.com/news/detail-495907.html

三、代码实现

// 你的路由
const routes = [
     {
        path:'/',
        redirect:'/login',
        component:()=> import('@/App'),
     },

]

// App.vue中
<template>
    <div id="app">
        <router-view> </router-view>
    </div>
</template>
<script>
import { getWxId, queryUser, bindWx } from '@/api/user'
import { getUrlParam } from '@/utils'
import { mapGetters } from 'vuex'

export default {
    name: 'App',
    computed: {
        ...mapGetters(['wxCode', 'wxId', 'userId']),//这里将获取到的code和openId都存到了store中了
    },
    created() {
        if (this.wxCode && this.wxId) {//如果获取到code和微信Id就去登录
            this.Login()
            return
        }
        //若没获取到就走下面这一步
        const code = getUrlParam('code') // 截取路径中的code

        if (!code) {
            console.log('获取微信code失败')
            return
        }
        this.$store.commit('user/SET_WX_CODE', code)
        this.getOpenIdAndWxUser(code)
    },
    methods: {
        getOpenIdAndWxUser(code) {
            getWxId(code)
                .then((res) => {
                    console.log(res)
                    if (!res.data) {
                        console.log('获取微信openId失败', res)

                        return
                    }
                    this.$store.commit('user/SET_WX_ID', res.data)//通过code获取到微信ID
                    console.log(this.wxCode, this.wxId)
                    this.Login()

                    // return getWxUser(result.data)
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        Login() {
            queryUser({//根据微信ID查询用户
                page: 1,
                limit: 999,
                wxId: this.wxId,
            }).then((res) => {
                console.log(res)
                if (res.data.rows[0].wxId) {//查到了就去登录
                    const Base64 = require('js-base64').Base64
                    const username = Base64.encode(
                        Math.random().toString(16).substr(2) +
                            res.data.rows[0].username
                    )
                    const password = Base64.encode(
                        Math.random().toString(16).substr(2) +
                            res.data.rows[0].realPwd
                    )
                    this.$store
                        .dispatch('user/login', {
                            username: username,
                            password: password,
                        })
                        .then(() => {
                            this.$router.push({
                                path: '/home',
                            })
                        })
                        .catch((err) => {
                            console.log(err)
                        })
                } else {//查不到就去登陆页面
                    this.$router.push({
                        path: '/',
                    })
                    this.$store.commit(
                        'user/SET_USER_ID',
                        res.data.rows[0].userId
                    )
                    console.log(this.$store.state.user.userId)
                    this.getWxUser()//绑定用户，将微信ID添加到用户表里面
                }
            })
        },
        getWxUser() {
            console.log(this.$store.state.user.userId)
            bindWx({
                userId: this.$store.state.user.userId,
                wxId: this.wxId,
            }).then((res) => {
                console.log(res)
                if (res.code == 200) {//修改成功去登录
                    this.Login()
                }
            })
        },
    },
}
</script>

<style></style>