feat: add auth support for axios request; :star2: 新增：axios 请求添加 auth 认证支持；

chenghongxing

2020-07-20 82e5955c3b22f452708cb7b26ca1164ce5c758f5

feat: add auth support for axios request; :star2:
新增：axios 请求添加 auth 认证支持；

 src/main.js

@@ -4,7 +4,6 @@
import './theme/index.less'
import Antd from 'ant-design-vue'
import Viser from 'viser-vue'
import axios from 'axios'
import '@/mock'
import store from './store'
import PouchDB from 'pouchdb'
@@ -12,7 +11,6 @@
import VueI18n from 'vue-i18n'
import Plugins from '@/plugins'

Vue.prototype.$axios = axios
Vue.config.productionTip = false
Vue.use(Viser)
Vue.use(Antd)

 src/mock/user/login.js

@@ -22,7 +22,7 @@
    result.message = Mock.mock('@TIMEFIX').CN + '，欢迎回来'
    result.data = {}
    result.data.user = user
    result.data.token = 'Authorization'
    result.data.token = 'Authorization:' + Math.random()
  }
  return result
})

 src/pages/login/Login.vue

@@ -76,7 +76,7 @@
<script>
import CommonLayout from '@/layouts/CommonLayout'
import {login} from '@/services'
import Cookie from 'js-cookie'
import {setAuthorization} from '@/utils/request'

export default {
  name: 'Login',
@@ -112,7 +112,7 @@
        const user = result.data.user
        this.$router.push('/dashboard/workplace')
        this.$store.commit('account/setUser', user)
        Cookie.set('token', result.data.token)
        setAuthorization({token: result.data.token})
        this.$message.success(result.message, 3)
      } else {
        this.error = result.message

 src/utils/request.js

@@ -1,13 +1,23 @@
import axios from 'axios'
import Cookie from 'js-cookie'

// 跨域认证信息 header 名
const xsrfHeaderName = 'Authorization'

axios.defaults.timeout = 5000
axios.defaults.withCredentials= true
axios.defaults.xsrfHeaderName= xsrfHeaderName
axios.defaults.xsrfCookieName= xsrfHeaderName

// const cookies = Cookie.get()
// Object.keys(cookies).forEach(key => {
//   axios.defaults.headers.common[key] = cookies[key]
// })
// 认证类型
const AUTH_TYPE = {
  BEARER: 'Bearer',
  BASIC: 'basic',
  AUTH1: 'auth1',
  AUTH2: 'auth2',
}

// http method
const METHOD = {
  GET: 'get',
  POST: 'post'
@@ -21,20 +31,37 @@
 * @returns {Promise<AxiosResponse<T>>}
 */
async function request(url, method, params) {
  // header 加入 token
  const token = Cookie.get('Authorization')
  const config = token ? {headers: {Authorization: token}} : {}
  switch (method) {
    case METHOD.GET:
      return axios.get(url, {params, ...config})
      return axios.get(url, {params})
    case METHOD.POST:
      return axios.post(url, params, config)
      return axios.post(url, params)
    default:
      return axios.get(url, {params, ...config})
      return axios.get(url, {params})
  }
}

/**
 * 设置认证信息
 * @param token {Object}
 * @param authType {AUTH_TYPE} 认证类型，默认：{AUTH_TYPE.BEARER}
 */
function setAuthorization(auth, authType = AUTH_TYPE.BEARER) {
  switch (authType) {
    case AUTH_TYPE.BEARER:
      Cookie.set(xsrfHeaderName, 'Bearer ' + auth.token)
      break
    case AUTH_TYPE.BASIC:
    case AUTH_TYPE.AUTH1:
    case AUTH_TYPE.AUTH2:
    default:
      break
  }
}

export {
  METHOD,
  request
  AUTH_TYPE,
  request,
  setAuthorization
}