鍍金池/ 問答/HTML/ nuxt 如何配置axios攔截器

nuxt 如何配置axios攔截器

需要對請求的header添加token 并且驗證token是否過期，設置axios攔截器失敗，頁不報錯

新建了一個axios.js 引入axios 并進行攔截配置 代碼如下

import axios from 'axios'
import store from '../../store/index'
// import router from '../router'
import { sha256 } from 'js-sha256'
// axios 配置
axios.defaults.timeout = 5000
// http request 攔截器
axios.interceptors.request.use(
  config => {
    let nowDate = new Date()
    let signTime = nowDate.getTime()
    if (store.state.token != null && store.state.expireTime > nowDate.getTime()) {
      config.headers.sign_time = signTime
      config.headers.auth_Code = store.state.authCode
      config.headers.sign = sha256.hmac(store.state.token, signTime + store.state.authCode)
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)

// // http response 攔截器
// axios.interceptors.response.use(
//   response => {
//     return response
//   },
//   error => {
//     if (error.response) {
//       switch (error.response.status) {
//         case 401:
//         // 401 清除token信息并跳轉到登錄頁面
//           store.commit('loginout')
//           router.replace({
//             path: '/login',
//             query: {redirect: router.currentRoute.fullPath}
//           })
//       }
//     }
//     // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
//     return Promise.reject(error.response.data)
//   }
// )

export default axios

然后再vue頁面中直接引入

import axios from '../assets/js/axios'

但是無法進行交互 ，沒報錯 請幫助，或者有經(jīng)驗大神貼下代碼參考下。

回答
編輯回答
吢涼

以自己解決
方法就是在plugins文件夾下新建一個 http.js用于攔截請求 寫法和axios攔截器寫法一致
然后再在nuxt.config.js文件中的添加

module.exports = {
//其他代碼
plugins: [
    { src: '~plugins/http', ssr: true }
  ]
}
2017年11月11日 17:51
編輯回答
扯不斷

只要加export default axios 就報錯 說什么URL沒有指定

2017年4月6日 02:12
編輯回答
焚音

雖然沒用nuxt寫過Vue，但是axios配置應該是大同小異的，這是我寫的一篇關于axios的配置文章，希望能對你有所幫助！ 動態(tài)Axios配置

2017年7月25日 05:21