微信端前后分离开发中，授权认证，获取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)

}