vue axios封裝以及登陸token過時跳轉問題

時間 2019-11-08

原文原文鏈接

Axios配置JWT/封裝插件/發送表單數據

首先請務必已仔細閱讀 Axios 文檔並熟悉 JWT：vue

安裝ios

npm install axios 
npm install es6-promise

爲何要安裝 promise polyfill ？雖然 Axios 的 GitHub 主頁開頭說了支持 IE8，但文檔最下面又說，前提是瀏覽器支持 promise，若是你不用關心瀏覽器兼容，那就不用安裝 es6-promise。es6

把 Axios 配置成 Vue 插件

用過 vue-resource 的都知道，它自己封裝成了 Vue 插件，能夠直接在 Vue 組件裏使用 this.$http， Axios 自己雖然沒有封裝，但咱們也能夠手動把它封裝成 Vue 插件。
具體原理請看 Vue框架引入JS庫的正確姿式，下面我就用代碼演示一下：npm

AxiosPlugin.js↓axios

require('es6-promise').polyfill() // 引入一次就行
import axios from 'axios'

// 建立 axios 實例
// 這裏 export  的緣由是方便組件外使用 axios
export const Axios = axios.create({
  baseURL: 'xxx', 
  timeout: 5000,
})

// 將 Axios 實例添加到Vue的原型對象上
export default {
  install(Vue) {
    Object.defineProperty(Vue.prototype, '$http', { value: Axios })
  }
}

main.jssegmentfault

import Vue from 'vue'
import AxiosPlugin from 'xxx/xxx/AxiosPlugin'
Vue.use(AxiosPlugin)

使用 axios 示例

在組件內部後端

/ GET 獲取用戶信息
// http://xxxx/user?a=1&b=2
const data = {
  params: {
    a: 1,
    b: 2,
  }
}
this.$http.get(url, data).then(res => {
  console.log(res)
})

// POST  請求
const data = {
  a: 1,
  b: 2,
}
this.$http.post(url, data).then(res => {
  console.log(res)
})

在組件外部promise

// POST
import { Axios } from 'xxx/xxx/AxiosPlugin'
Axios.post(url, data)

以上是 Axios 的基本配置，下面咱們說一下如何以 x-www-form-urlencoded 格式發送表單數據、設置 JWT 的 token 、以及 token 過時自動登陸。瀏覽器

高級配置

廢話很少說，直接上完整的代碼，伸手黨的福利
AxiosPlugin.js服務器

require('es6-promise').polyfill()
import axios from 'axios'

export const Axios = axios.create({
  baseURL:  'http://xxxxx/',
  timeout: 10000,
})

//POST傳參序列化(添加請求攔截器)
 // 在發送請求以前作某件事
Axios.interceptors.request.use(config => {
    // 設置以 form 表單的形式提交參數，若是以 JSON 的形式提交表單，可忽略
    if(config.method  === 'post'){
        // JSON 轉換爲 FormData
        const formData = new FormData()
        Object.keys(config.data).forEach(key => formData.append(key, config.data[key]))
        config.data = formData
    }

    // 下面會說在何時存儲 token
    if (localStorage.token) {   
        config.headers.Authorization = 'JWT ' + localStorage.token
    }
    return config
},error =>{
    alert("錯誤的傳參", 'fail')
    return Promise.reject(error)
})

//返回狀態判斷(添加響應攔截器)
Axios.interceptors.response.use(res =>{
   //對響應數據作些事
    if(!res.data.success){
       alert(res.error_msg)
       return Promise.reject(res)
    }
    return res
}, error => {
    if(error.response.status === 401) {
      // 401 說明 token 驗證失敗
      // 能夠直接跳轉到登陸頁面，從新登陸獲取 token
      location.href = '/login'
    } else if (error.response.status === 500) {
       // 服務器錯誤
       // do something
       return Promise.reject(error.response.data)
    }
    // 返回 response 裏的錯誤信息
    return Promise.reject(error.response.data)
})

export default {
  install(Vue) {
    Object.defineProperty(Vue.prototype, '$http', { value: Axios })
  }
}

main.js

import Vue from 'vue'
import AxiosPlugin from 'xxx/xxx/AxiosPlugin'
Vue.use(AxiosPlugin)

export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    onLogin() {
      const { username, password } = this
      const data = {
        username,
        password
      }

      this.$http.post('url', data)
        .then(res => {
         // 登陸成功
          if(res.token) {
            // 儲存 token
            localStorage.token = res.token
          }
        })
        .catch(error => {
          // 登陸失敗
          // 驗證後端返回的錯誤字段，若是匹配，提示用戶
          // axios 配置裏必需要 return Promise.reject(error.response.data) 才能拿到錯誤字段
          if(error.xxx == 'xxx') {
            alert('用戶名或密碼錯誤！')
          }
        })
    }
  }
}

做者：Yi罐可樂
連接：https://www.jianshu.com/p/aeaa353da89b
來源：簡書
簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。

實際項目中：

require('es6-promise').polyfill();
import axios from 'axios';
import store from '../../store'
import router from '../../router'
export const Axios = axios.create({
  timeout: 10000,
})

//POST傳參序列化(添加請求攔截器)
// 在發送請求以前作某件事
Axios.interceptors.request.use(config => {
  if (localStorage.token) {
    config.headers.Authorization = 'Bearer ' + localStorage.token;
  }
  return config
},error =>{
  alert("錯誤的傳參", 'fail')
  return Promise.reject(error)
})

//返回狀態判斷(添加響應攔截器)
Axios.interceptors.response.use(res =>{
  //對響應數據作些事
  if (res.headers.authorization) {
    localStorage.token = res.headers.authorization;
  }

  return res
}, error => {
  if(error.response.status === 401 || error.response.status === 403) {
    // 401 說明 token 驗證失敗
    // 能夠直接跳轉到登陸頁面，從新登陸獲取 token
    //location.href = '/admin/login'
    router.push({
      path:'/login',
      query:{redirect:location.hostname}
    })
  } else if (error.response.status === 500) {
    // 服務器錯誤
    // do something
    return Promise.reject(error.response.data)
  }
  // 返回 response 裏的錯誤信息
  return Promise.reject(error.response.data)
})

export default {
  install(Vue) {
    Object.defineProperty(Vue.prototype, '$axios', { value: Axios })
  }
}