总结vue前后端分离时对验证信息的处理思路

思路是,启用公共axiosFn方法,每次请求调用该方法。请求前判断cookie中是否存在token等验证信息,响应时判断是否需要更新验证信息及其他特殊处理

在vue的授权认证流程总结

  • 1.创建控制路径接口列表和url中的参数的文件uri.js
  • 2.创建控制cookie的文件cache.js
  • 3.使用axios,用axios.interceptors.request.use检查发送请求时cookie中是否含有token和openid的token,如果不存在进行处理
  • 4.使用axios.interceptors.response.use处理响应信息,判断是否更新token等信息
  • 5.return出axios,每次前后端交互调用这个方法

1.创建uri.js

创建一个接口根目录,以及获取url中的参数的方法等,在开发环境下写入一个默认的token和openid

const rootHref = 'http://aaa.com/'
const variables = {
  // 申请授权地址
  authorization: rootHref + 'wx/index?returnUrl=',
  // 我的小伙伴
  GetMyPartner: rootHref + 'api/AccountInfo/GetMyPartner',
  // 买家-》获取订单列表
  getOrderList: rootHref + 'api/Orders/GetUserOrderList',
  // 买家-》取消订单
  cancleOrders: rootHref + 'api/Orders/CancelOrder',
  getLocationUrl: function () {
    let url = window.location.href
    if (url.indexOf('?') > -1) {
      let pos = url.indexOf('?')
      url = url.substring(0, pos)
      return url
    }
    return url
  },
  getUrlParm: function (key) {
    let reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i')
    let r = window.location.search.substr(1).match(reg)
    if (r != null) {
      return unescape(r[2])
    }
    return null
  }
}
if (process.env.NODE_ENV === 'development') {
  variables.openid = 'ooooooooooo'
  variables.token = 'asdfdasfasdfsadfsadfsdafsadfsadfas'
}
export default variables

2.创建控制cookie的文件cache.js

因为本次用的是cookie,所以暴露的是对cookie的操作。当然也可以把对本地存储session的方法写在这里。包括获取参数,确认是否存在,设置更新,移除参数等。

export default {
  // 获取cookie
  get: function (key) {
    let allcookies = document.cookie
    let arr = allcookies.split(';')
    let value
    for (let i = 0; i < arr.length; i++) {
      let strIn = arr[i]
      let pos = strIn.indexOf('=')
      let regEx = /\s+/g
      if (strIn.substring(0, pos).replace(regEx, '') === key) {
        value = strIn.substring(pos + 1, strIn.length)
      }
    }
    return value
  },
  // 是否存在cookie
  contain: function (key) {
    let allcookies = document.cookie
    let cookiePos = allcookies.indexOf(key)
    if (cookiePos > -1) {
      return true
    }
    return false
  },
  // 写入cookie
  set: function (key, value) {
    let Days = 30
    let exp = new Date()
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
    document.cookie = key + '=' + escape(value) + ';expires=' + exp.toGMTString()
  },
  // 移除cookie
  remove: function (key) {
    /* eslint-disable no-useless-escape */
    let keys = document.cookie.match(/[^ =;]+(?=\=)/g)
    if (keys) {
      for (let i = keys.length; i--;) {
        document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
      }
    }
  }
}

3.使用axios,用axios.interceptors.request.use检查发送请求时cookie中是否含有token和openid的token,如果不存在进行处理

设置请求过期事件,和请求头格式。然后注入请求前配置。如果是生产环境,判断cookie是否存在token和openid,然后进行裸机操作。

axios.defaults.timeout = 6000000
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
axios.interceptors.request.use(config => {
  if (process.env.NODE_ENV === 'production') {
    if (cache.get('token') && cache.get('openid')) {
      console.log('has token')
    } else {
      let openid = uri.getUrlParm('openid')
      let token = uri.getUrlParm('token')
      if (openid && token) {
        cache.set('openid', openid)
        cache.set('token', token)
        window.location.reload()
      } else {
        window.location.href = uri.authorization + uri.getLocationUrl()
      }
    }
  }
  return config
})

4.使用axios.interceptors.response.use处理响应信息,判断是否更新token等信息

这里主要对返回的token的更新,以及对不同反回状态码的响应


axios.interceptors.response.use(res => {
  if (res.headers.token) {
    cache.set('token', res.headers.token)
  }
  //-------------------对res.data 的判断操作也写在这里
  return res
})

5.return出axios,每次前后端交互调用这个方法

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)
  }).catch(() => {
    window.location.href = '/#/page404'
  })
}

随机浏览