vue axios封裝以及登錄token過期跳轉問題

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

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

• 中文文檔
• JWT 中文文檔

安裝

npm install axios 
npm install es6-promise 

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

把 Axios 配置成 Vue 插件

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

AxiosPlugin.js↓

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.js

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)
})

在組件外部

// 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)

Login.vue

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 })
  }
}

vue中用戶未登錄跳轉到登錄頁，登錄后返回將要去的頁面或者之前的頁面

最近寫用戶登錄，網上很多辦法是在route的query保存上個頁面的url，然后登錄后再跳轉到這個頁面。但是如果我跳轉的頁面有很多的參數也在query里，這樣就不好操作了。下面我先附上用戶未登錄跳轉登錄頁的方法。

請求我用的是axios。如果方便點，我們可以用axios的全局配置，來攔截請求回來的數據，當請求回來的狀態碼不是成功的時候，跳轉登錄頁 ，我們公司1001是錯誤的狀態，這個根據自己公司來定。

跳轉的登錄頁后，登錄成功返回上一個頁面

在登錄頁中，判斷如果登錄成功，寫上這句話

返回上個頁面，go(-2)返回上上個頁面，go(0)是刷新當前頁面。這樣寫就沒有什么問題啦，但是有一種情況，登錄頁是朋友分享過來的。那我之前在百度頁面打開的這個鏈接，登錄后就跳轉到了百度，這樣是不行的。雖然沒有直接顯示登錄頁的頁面，但是這種情況也得考慮。

我的思路是判斷上個頁面的域名是不是和登錄頁的域名一樣，也就是說判斷是不是你的項目，如果不是就跳轉到首頁

只需要在跳轉登錄頁的時候把域名傳到router的query里面，你自己隨便起個名字，像這樣

這樣在登錄頁就拿到了上個頁面的location.hostname了。然后在登錄頁判斷一下

 

---------------------
作者：夜子月
來源：CSDN
原文：https://blog.csdn.net/weixin_41753291/article/details/80619523
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

 兼職前端開發（QQ：2435289619）