vue项目中引入js-base64加密请求数据

作者: bkbtp 分类: 前端 发布时间: 2018-05-17 11:03

安装base64

npm install  js-base64 --save

项目文件中引入与使用

let Base64 = require('js-base64').Base64 // 引入
Base64.encode('admin')        // 加密 YWRtaW4=
Base64.decode('YWRtaW4=')     // 解密 admin

将加密封装进请求服务层

import Message from 'iview/src/components/message'
import axios from 'axios'
import qs from 'qs'
import Router from 'vue-router'
import routers from '@/router/index'
const router = new Router({
  routers,
  linkActiveClass: 'active'
})

const rootPath = '/api' // 后端 API 根路径
const ERR_OK = 0
const NOT_LOGIN = 40004
const xhr = ({ method = 'get', url, params = null }) => {
  let req = {}
  let Base64 = require('js-base64').Base64
  for (let key in params) {
    req[key] = Base64.encode(params[key])
    let a = req[key].substring(0, 1)
    let b = req[key].substring(req[key].length - 1, req[key].length)
    let c = req[key].substring(1, req[key].length - 1)
    req[key] = b + c + a
  }
  return new Promise((resolve, reject) => {
    if (method === 'get') {
      axios.get(rootPath + url, {
        params: req
      })
        .then(response => {
          var data = response.data
          if (data.c === ERR_OK) {
            resolve(data.d)
          } else if (data.c === NOT_LOGIN) {
            localStorage.removeItem('loginInfo')
            localStorage.removeItem('userInfo')
            localStorage.removeItem('mainMenu')
            Message.warning(data.m)
            router.push({path: '/login'})
          } else {
            Message.warning(data.m)
          }
        })
        .catch(e => {
          Message.warning('请求 API 失败,请检查网络是否正常')
        })
    } else if (method === 'post') {
      axios.post(rootPath + url, qs.stringify(req), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
        .then(response => {
          var data = response.data
          if (data.c === ERR_OK) {
            resolve(data.d)
          } else if (data.c === NOT_LOGIN) {
            localStorage.removeItem('loginInfo')
            localStorage.removeItem('userInfo')
            localStorage.removeItem('mainMenu')
            Message.warning(data.m)
            router.push({path: '/login'})
          } else {
            Message.warning(data.m)
          }
        })
        .catch(e => {
          Message.warning('请求 API 失败,请检查网络是否正常')
        })
    } else {
      //
    }
  })
}

export default xhr

此例加密规则是将请求参数base64加密后,首尾字母调换。与后台商量好规则对应解密就ok。

这里没用使用axios拦截器,大家可自行根据情况根据实际情况进行修改。

axios拦截器的应用可查看另一篇文章 基于axios封装服务层services

发表评论

电子邮件地址不会被公开。 必填项已用*标注

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。