vue php 微信公众号,详解vue微信网页授权最终解决方案

https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.redirect_uri}&response_type=code&scope=${

this.scope}&state=${this.state}#wechat_redirectcode换取网页授权access_token，拉取用户信息(需scope为 snsapi_userinfo)，返回是否登录成功，成功后返回用户信息和登录令牌 token

import router from './router'

import store from './store'

import getPageTitle from '@/utils/get-page-title'

import wechatAuth from './plugins/wechatAuth' // 微信登录插件

const qs = require('qs')

router.beforeEach((to, from, next) => {

const loginStatus = Number(store.getters.loginStatus)

console.log('loginStatus=' + loginStatus)

console.log('token=' + store.getters.token)

// 页面标题

document.title = getPageTitle(to.meta.title)

if (loginStatus === 0) {

// 微信未授权登录跳转到授权登录页面

const url = window.location.href

// 解决重复登录url添加重复的code与state问题

const parseUrl = qs.parse(url.split('?')[1])

let loginUrl

if (parseUrl.code && parseUrl.state) {

delete parseUrl.code

delete parseUrl.state

loginUrl = `${url.split('?')[0]}?${qs.stringify(parseUrl)}`

} else {

loginUrl = url

}

// 设置微信授权回调地址

wechatAuth.redirect_uri = loginUrl

// 无论拒绝还是授权都设置成1

store.dispatch('user/setLoginStatus', 1)

// 跳转到微信授权页面

window.location.href = wechatAuth.authUrl

} else if (loginStatus === 1) {

// 用户已授权，获取code

try {

// 通过回调链接设置code status

wechatAuth.returnFromWechat(to.fullPath)

} catch (err) {

// 失败，设置状态未登录，刷新页面

store.dispatch('user/setLoginStatus', 0)

location.reload()

}

// 同意授权 to.fullPath 携带code参数，拒绝授权没有code参数

const code = wechatAuth.code

if (code) {

// 拿到code 访问服务端的登录接口

store

.dispatch('user/loginWechatAuth', code)

.then(res => {

// 成功设置已登录状态

store.dispatch('user/setLoginStatus', 2)

next()

})

.catch(() => {

// 失败，设置状态未登录，刷新页面

store.dispatch('user/setLoginStatus', 0)

location.reload()

})

} else {

store.dispatch('user/setLoginStatus', 0)

location.reload()

}

} else {

// 已登录直接进入

next()

}

})

request.js// 登录超时,重新登录

if (res.status === 401) {

store.dispatch('user/fedLogOut').then(() => {

location.reload()

})

}

store/modules/user.jsimport { loginByCode } from '@/api/user'

import {

saveToken,

saveLoginStatus,

saveUserInfo,

removeToken,

removeUserInfo,

removeLoginStatus,

loadLoginStatus,

loadToken,

loadUserInfo

} from '@/utils/cache'

const state = {

loginStatus: loadLoginStatus(), // 登录状态

token: loadToken(), // token

userInfo: loadUserInfo() // 用户登录信息

}

const mutations = {

SET_USERINFO: (state, userInfo) => {

state.userInfo = userInfo

},

SET_LOGIN_STATUS: (state, loginStatus) => {

state.loginStatus = loginStatus

},

SET_TOKEN: (state, token) => {

state.token = token

}

}

const actions = {

// 登录相关，通过code获取token和用户信息

loginWechatAuth({ commit }, code) {

const data = {

code: code

}

return new Promise((resolve, reject) => {

loginByCode(data)

.then(res => {

// 存用户信息，token

commit('SET_USERINFO', saveUserInfo(res.data.user))

commit('SET_TOKEN', saveToken(res.data.token))

resolve(res)

})

.catch(error => {

reject(error)

})

})

},

// 设置状态

setLoginStatus({ commit }, query) {

if (query === 0 || query === 1) {

// 上线打开注释，本地调试注释掉，保持信息最新

removeToken()

removeUserInfo()

}

// 设置不同的登录状态

commit('SET_LOGIN_STATUS', saveLoginStatus(query))

},

// 登出

fedLogOut() {

// 删除token，用户信息，登陆状态

removeToken()

removeUserInfo()

removeLoginStatus()

}

}

export default {

namespaced: true,

state,

mutations,

actions

}

VUE_APP_WECHAT_APPID='12345678'复制代码

授权再也难不住我了，如果哪里有问题希望大家给我留言纠正，互相学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学php网。