【Vue】Vue微信授权（系列一）
最近算是把微信授权，sdk，接触了一边了，所以准备写一个系列；
微信授权微信SDK的使用，例如分享等功能小程序授权小程序微信支付小程序模板消息
不要问我为什么后面是小程序微信支付，小程序模板消息，因为普通微信公众号项目的更本不需要前端去操作太多，直接调取后台接口就可以完成。
##Vue微信授权
这里我们用的是Vue全家桶开发先上一张微信授权流程图片吧：
你可以尝试着跟着这个流程图走一遍逻辑，在开始动手和后台商量。
我这里大概的授权逻辑是：
- 路由拦截：利用Vue路由拦截,判断用户登录状态（后面向后台请求的时候，让后台返回），如果是登录状态就next(),否则去授权页（这里提示一下，我弄了一个空白页用来授权用的author.vue）
下面 - 获取code：前端先获取当前地址，传给后台,后台拿到你的当前地址,通过微信提供的接口，返回一个拼接上参数(appid,redirect_uri…)的微信端授权地址，这时候前端跳转该地址显示微信授权页面，用户授权之后拿到带有code的地址。
- 获取openid：截取地址获取code传递给后台，后台拿着code向微信服务器请求，获取access_token和openod并且存到数据库，返回有用的数据。
这里是后台返回的微信授权页地址：
返回带有code的地址，正则截取获得code,截取方法下面有：
下面是我router拦截、axios配置和授权页的代码和注释
router拦截
router.beforeEach((to, from, next) => {
document.title = to.meta.title //修改各个页面的title
var uid = getUid() //获取uid
if (!uid) {
if (to.path === '/author') {
next()
} else {
setToUrl(to.fullPath)
next('/author')
}
// window.location.href = 'http://hytera.cct.work/dist/#/author'
} else {
next()
}
})
axios配置
import axios from 'axios'
import qs from 'qs'
import { getToken, setToken } from '../lib/util'
const ajaxUrl = process.env.NODE_ENV === 'development'
// 测试环境api接口
? '/'
// 线上环境api接口
: 'http://wenlian.cct.work'
axios.defaults.headers.common['Source'] = '1'
const newAxios = axios.create({
baseURL: ajaxUrl,
timeout: 5000
})
// 添加请求拦截器
newAxios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// 获取token
const token = getToken()
if (token) {
config.headers.common['Authorization'] = `Bearer ${token}`
// 在post请求发送出去之前，对其进行编码
if (config.method === 'post') {
config.data = qs.stringify(config.data)
}
}
return config
}, function (error) {
// 对请求错误做些什么
return error
})
// 添加响应拦截器
newAxios.interceptors.response.use(function (response) {
// 对响应数据做点什么
let newToken = response.headers['new-token']
if (newToken) {
setToken(newToken)
}
return response
}, function (error) {
// 对响应错误做点什么
return error
})
export default {
post (url, data) {
return newAxios({
method: 'post',
url: url,
data: data
})
},
get (url, params) {
return newAxios({
method: 'get',
url: url,
params
})
},
delete (url, params) {
return newAxios({
method: 'delete',
url: url,
params
})
},
put (url, data) {
return newAxios({
method: 'put',
url: url,
data: data
})
}
}
授权页
import {getToUrl, setToken, setUid} from '../assets/lib/util' // 封装的缓存方法
var url = getToUrl()
export default {
created () {
var code = this.GetUrlParame('code') // 截取code
console.log(code)
if (!code) {
var domine = window.location.href.split('#')[0] // 微信会自动识别# 并且清除#后面的内容
this.$http.post('/OAutho/OAuthUrl?Ourl=' + domine) // 如果没有code，说明用户还没授权 将当前地址传递给后台
.then(res => {
// 正则处理后台返回的链接
var url = /http\S*t/g.exec(res.data.url)
url = url[0].replace(/\\u0026/g, '&')
window.location.href = url
})
} else {
this.$http.post('/OAutho/OAuthHandle?code=' + code) //如果有code，说明用户点击了授权 将获取到的code传递给后台
.then(res => {
// 返回状态和UId
console.log(res.data)
this.uid = res.data.UId
setUid(this.uid)
if (res.data.status && this.uid) {
window.location.replace('http://wenlian.cct.work/dist/#' + url)
}
})
}
},
data () {
return {
uid: ''
}
},
methods: {
// 截取code
GetUrlParame (parameName) {
/// 获取地址栏指定参数的值
/// 参数名
// 获取url中跟在问号后面的部分
var parames = window.location.search
// 检测参数是否存在
if (parames.indexOf(parameName) > -1) {
var parameValue = ''
parameValue = parames.substring(parames.indexOf(parameName), parames.length)
// 检测后面是否还有参数
if (parameValue.indexOf('&') > -1) {
// 去除后面多余的参数, 得到最终 parameName=parameValue 形式的值
parameValue = parameValue.substring(0, parameValue.indexOf('&'))
// 去掉参数名, 得到最终纯值字符串
parameValue = parameValue.replace(parameName + '=', '')
return parameValue
}
return ''
}
}
}
}
可能我的授权办法有点蠢，后面有更好的办法在修改，有不好的地方，可以优化的地方，大佬看客还希望指点出来。我改
↓↓↓
↓↓
↓
其他相关微信系列
【Vue】Vue微信JS-SDK分享（系列二）