vue+vant 微信公众号内嵌单页面获取openid
介绍：
以前做的是，直接www.baidu.com?openid=xxx,由第三方提供openid，现在需要我们包产到户，全部有我们来做。
2019-12-16：由于vuex刷新会重置，所以导致在一个有路由守卫的页面刷新，会出现空白，后台报错：[获取openid的results:{"errcode":40163,"errmsg":"code been used, hints: [ req_id: PHHFbxXIRa-rC_V3 ]"}，原因就是store存的openid刷新消失后，5分钟内又去getCode，微信返回如上结果，于今日优化有vuex版本。
备注：获取openid的流程
第一步：
配置公众号：设置-公众号设置-功能设置，切记必须是在线域名，localhost不行
把下图txt文件下载，放到前台页面服务器目录下，域名写在输入框中。
域名规则：例:https://admin.serve.com.cn；填写：admin.serve.com.cn；不要加https|http
至此，后台配置完事儿
第二步：
//main.js;利用到了vuex的store.js;
//如果没有用到vuex请移步至最后，无vuex版
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import my from './assets/js/lbc.js'
import { Toast} from "vant";
Vue.prototype.$my=my
Vue.config.productionTip = false
router.beforeEach((to, from, next) => {
//微信公众号appid-开发-基本配置中获取
const appId = my.appId
//获取code后再次跳转路径 window.location.href；例：www.baido.com/#/Home
const toPath = my.host+'/#'+to.path
//核心步骤，获取code
const hrefurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appId+"&redirect_uri="+encodeURIComponent(toPath)+"&response_type=code&scope=snsapi_base&state=dcabe11a-751f-490f-9dcc-606881c6fcdb#wechat_redirect";
//从地址栏获取code
const code = my.getQueryString('code')
const isLogin = ()=>{//是否登录
let openid = localStorage.getItem('openId') || store.state.loginInfo.openId;
axios.post(my.api+'/wet/due/checkIsBind',{openId:openid })
.then((res) => {
if (res.data&&res.data.code == 200) {//已登录
store.commit('setLoginInfo',{...res.data.data})//存登陆信息
next()
} else {//未登录
next({
path: '/Register',
})
}
})
}
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
/* 判断该路由是否需要登录权限 */
if (to.matched.some(record => record.meta.requireAuth)) {
if(localStorage.getItem('openId') || store.state.loginInfo.openId){
isLogin()//是否登录 正式环境 store.state.loginInfo.openId加上此代码，方便测试
}else{ //openId不存在
if(code){ //根据code获取openId
axios.post(my.api+"/wet/chat/getOpenId", {code:code}).then((res) => {
if (res.data&&res.data.code == 200) {
localStorage.setItem('openId',res.data.data.openid)
//commit同步，dispatch 异步
store.commit('setLoginInfo',{openId:res.data.data.openid})
isLogin()//是否登录
} else {
Toast(res.data?res.data.message:'请求失败！');
}
})
}else{ //获取code
window.location.replace(hrefurl)
}
}
}else{
next()
}
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
//lbc.js
import Vue from 'vue'
const api = 'https://xxxx.cn'
const host = 'https://xxxx.com.cn'//授权所需域名
const appId = 'wx09999999'
//获取地址栏参数
const getQueryString = (name) => {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
}
export default {
getQueryString,
api,
host,
appId
}
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import my from './assets/js/lbc.js'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
loginInfo:{
openId:'', //正式环境制空
// openId:'1',//测试环境
// id:2//测试环境
}
},
getters: {
},
mutations: {
setLoginInfo(state, playload){
state.loginInfo = {...state.loginInfo,...playload}
},
},
actions: {
}
})
//router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Home from './view/Home'
import Register from './view/Register'
//项目申请
import ProjectApply from './view/ProjectApply/ProjectApply'
export default new Router({
//mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home,
meta: {
title:'首页',
requireAuth: false
}
},
{
path: '/Register',
name: 'Register',
component:Register,
meta: {
title: '注册',
requireAuth: false//false 不需要openid
}
},
{
path: '/ProjectApply',
name: 'ProjectApply',
component:ProjectApply,
meta: {
title: '申请',
requireAuth: true //true 需要openid
}
},
]
})
无vuex版:
由于很多时候只是一个简单的页面，不要vuex，因此只需要localStorage就可以了
代码如下：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import my from './assets/js/lbc.js'
import axios from 'axios'
import api from './api/url'
Vue.prototype.axios = axios
Vue.config.productionTip = false
//判断是否注册，路由的跳转
router.beforeEach((to,from,next) => {
//微信公众号appid基本备置中获取
const appId = 'wx399999e'
const toPath = my.host+'/#' + to.path
//核心步骤，获取code
const hrefurl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appId+"&redirect_uri="+encodeURIComponent(toPath)+"&response_type=code&scope=snsapi_base&state=dcabe11a-751f-490f-9dcc-606881c6fcdb#wechat_redirect";
//从地址栏获取code
const code = my.getQueryString('code')
const isLogin = (openid)=>{//是否登录，此为java后台提供接口
axios.get(api.isRegister+'?openId=' + openid)
.then(function (res) {
if (res.data&&res.data.code == 200) {//已登录
localStorage.setItem("userInfo",JSON.stringify(response.data.data))//存登陆信息
next()
} else {//未登录
//此处应该跳转到注册页面(由于第三方所以跳转到别人的系统)
//自己系统直接 next('/register')
window.location.href = 'http://xxxx/register'
}
})
}
const getOpenid = (code)=> { //获取openid，此为java后台提供接口
axios.get('http://获取openid接口?code=' + code)
.then(function (response) {
localStorage.setItem('openid',response.data);
isLogin(response.data);//是否注册
}).catch(function (error) {
console.log(error)
})
}
/* 路由发生变化修改页面title */
if(to.meta.title){
document.title = to.meta.title;
}
/* 判断该路由是否需要登录权限 */
if (to.matched.some(record => record.meta.requireAuth)){
//是否注册过信息~
const openid = localStorage.getItem('openid');
if(openid){
isLogin(openid)
}else{
if(code){
getOpenid(code) //我把获取openid请求提出去，简单明了很多
}else{
window.location.replace(hrefurl)
}
}
}else{
next()
}
})
new Vue({
api,
router,
store,
render: h => h(App)
}).$mount('#app')
结尾：没了,csdn又boom了，回家明天再搞。