微信端前后端分离开发中token验证和数据的获取

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

随机浏览