一、需求說(shuō)明

通過(guò)vue綁定微信登錄，首次進(jìn)入獲取code，通過(guò)code獲取openId查用戶(hù)，然后進(jìn)行登錄，第二次進(jìn)入若綁定過(guò)微信，直接登錄進(jìn)入主界面，若沒(méi)綁定過(guò)微信，則跳轉(zhuǎn)到登錄頁(yè)面。

二、準(zhǔn)備工作

（1）開(kāi)通微信公眾號(hào)的相關(guān)功能

測(cè)試賬號(hào)會(huì)有appID和appsecret,記住這兩個(gè)，后續(xù)會(huì)用到

填寫(xiě)js接口安全域名，這里填的就是你的服務(wù)器接口訪問(wèn)地址


這里先填自己本機(jī)的地址，記住不要加http等協(xié)議，端口號(hào)是你項(xiàng)目的端口號(hào)，例如我的項(xiàng)目端口號(hào)是8368

（2）其他準(zhǔn)備工作

redirect_uri和appid

appid就是你測(cè)試號(hào)類(lèi)里面的appId
redirect_uri是自己配置的，比如你想訪問(wèn)http:192.168.1.117:8080/zy/project/index.html,那么你的redirect_uri可以就寫(xiě)成這個(gè)，那么這個(gè)地址下面的網(wǎng)頁(yè)都可以訪問(wèn)
當(dāng)你用瀏覽器訪問(wèn)https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxxxxxxxxxx&redirect_uri=xxxxxxxxxxx&response_type=code&scope=snsapi_base#wechat_redirect這個(gè)鏈接的時(shí)候，會(huì)提示請(qǐng)?jiān)谖⑿趴蛻?hù)端打開(kāi)，這個(gè)時(shí)候需要用微信開(kāi)發(fā)者工具打開(kāi)，在地址欄中輸入這個(gè)鏈接，就可以了，成功訪問(wèn)后，會(huì)跳轉(zhuǎn)到你redirect_uri重定向到的那個(gè)頁(yè)面，并且地址欄中還會(huì)多了一個(gè)code，這樣顯示就說(shuō)明成功獲取到了code

scoped參數(shù)錯(cuò)誤或者沒(méi)有scoped權(quán)限

出現(xiàn)這個(gè)錯(cuò)誤可以查一下你的redirect_uri填寫(xiě)是否正確，看一下微信公眾平臺(tái)的網(wǎng)頁(yè)賬號(hào)授權(quán)域名填寫(xiě)是否正確，看一下js接口安全域名填寫(xiě)是否正確

三、代碼實(shí)現(xiàn)

// 你的路由 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}//若沒(méi)獲取到就走下面這一步const code = getUrlParam('code') // 截取路徑中的codeif (!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)//通過(guò)code獲取到微信IDconsole.log(this.wxCode, this.wxId)this.Login()// return getWxUser(result.data)}).catch((err) => {console.log(err)})},Login() {queryUser({//根據(jù)微信ID查詢(xún)用戶(hù)page: 1,limit: 999,wxId: this.wxId,}).then((res) => {console.log(res)if (res.data.rows[0].wxId) {//查到了就去登錄const Base64 = require('js-base64').Base64const 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 {//查不到就去登陸頁(yè)面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()//綁定用戶(hù)，將微信ID添加到用戶(hù)表里面}})},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>

總結(jié)

以上是生活随笔為你收集整理的vue实现绑定微信登录全过程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。