feat: add auth support for axios request; 🌟

新增：axios 请求添加 auth 认证支持；

src/main.js

@@ -4,7 +4,6 @@ import router from './router'
 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 'animate.css/source/animate.css'
 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 @@ Mock.mock('/login', 'post', ({body}) => {
     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 @@ export default {
         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 @@ const METHOD = {
  * @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})
+  }
+}
+
+/**
+ * 设置认证信息
+ * @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:
-      return axios.get(url, {params, ...config})
+      break
   }
 }
 
 export {
   METHOD,
-  request
+  AUTH_TYPE,
+  request,
+  setAuthorization
 }