微信端前后分离开发中,授权认证,获取token和openid是必不可少的一步。
我们的思路是,每次调用接口前,判断cookie里面是否有token和openid,没有的话判断url参数中是否存在,没有的话跳转到授权认证页面。授权认证之后,会将token和openid放在url上返回回来,然后添加到cookie,这样就形成了一个闭环。代码如下
export function Cklogin () {
let url = window.location.href
let admin = {
openid: '',
token: ''
}
if (getCookie('openid') && getCookie('token')) {
admin.openid = getCookie('openid')
admin.token = getCookie('token')
} else {
if (getQueryString('openid') && getQueryString('token')) {
setCookie('openid', getQueryString('openid'))
setCookie('token', getQueryString('token'))
admin.openid = getCookie('openid')
admin.token = getCookie('token')
} else {
window.location.href = 'http://aaaa?returnUrl=' + url
}
}
return admin
}
// --------------获取cookie
function getCookie (cookieName) {
let allcookies = document.cookie
let cookiePos = allcookies.indexOf(cookieName)
let value = ''
if (cookiePos !== -1) {
cookiePos += cookieName.length + 1
let cookieEnd = allcookies.indexOf(';', cookiePos)
if (cookieEnd === -1) {
cookieEnd = allcookies.length
}
value = unescape(allcookies.substring(cookiePos, cookieEnd))
}
return value
}
// -------获取url中的参数
function getQueryString (name) {
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
let r = window.location.search.substr(1).match(reg)
if (r != null) return unescape(r[2]); return null
}
// -----------------设置cookie
function setCookie (name, value) {
let Days = 30
let exp = new Date()
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString()
}
然后是config.js ,这里主要做两个配置,第一是定义一个判断返回值是否正确的ERR_OK变量,另一个就是定义axios。axios默认会以get方式发送请求,显然我更想要一个post。但是试了半天总是有问题,找到一个方法,封装起来着这里统一调用。
import axios from 'axios'
export const ERR_OK = 0
export function axiosFn (url, data) {
return axios({
url: url,
method: 'post',
data: data,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then((res) => {
return Promise.resolve(res.data)
})
}
然后就是业务调用了。又来了上面几步,这里就简单了。首先要进行环境判断,开发环境下我是用固定的token和openid即可,因为开发环境下没办法微信授权获取认证。生产环境的时候,我们就要调用校验,然后获取token和openid,如果token和openid没有,便会进行重新授权认证获取。
import {axiosFn} from './config'
import {Cklogin} from './cklogin'
export function getInitVals () {
let url = ''
let data
if (process.env.NODE_ENV === 'development') {
data = {
'openid': '11',
'token': 'asdfsdfsfsf'
}
} else if (process.env.NODE_ENV === 'production') {
let CkloginFn = Cklogin()
data = {
'openid': CkloginFn.openid,
'token': CkloginFn.token
}
}
url = 'http://aaaaaaa'
return axiosFn(url, data)
}