nuxt實現(xiàn)封裝axios并且獲取token

更新時間：2023年10月12日 08:39:16 作者：這個殺手好冷

這篇文章主要介紹了nuxt實現(xiàn)封裝axios并且獲取token,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

nuxt封裝axios并且獲取token

axios 多環(huán)節(jié)變量配置不同地址

npm安裝方式

npm i --D cross-env

  "scripts": {
    "dev": "cross-env process.env.__ENV=測試地址 nuxt",
    "build": "cross-env process.env.__ENV=打包地址 nuxt build",
    "start": "nuxt start",
    "export": "nuxt export",
    "serve": "nuxt serve"
  },

nuxt.config.js配置

env: {
  __ENV: process.env.__ENV
},

axios全局使用的時候

axios.defaults.baseURL?=?process.env.__ENV

nuxt 服務端進行請求時帶上token

期望結果：在服務端、客戶端請求時候帶上token

實現(xiàn)方式：把請求的cookie放到header里

如果沒有安裝 cookie-universal-nuxt 需要安裝一下插件

//修改 nuxt.config.js
//添加模塊
  modules: [
    'cookie-universal-nuxt',
    "@nuxtjs/axios",
  ]
//添加插件引用
  plugins:[
    '@/plugins/axios',
  ]

//添加插件文件 plugins/axios.js
let isClient = process.env.VUE_ENV === 'client' //區(qū)分端
export default ({ redirect, $axios, app }) => {
  $axios.onRequest(config => {
    return new Promise((resolve, reject) => {
      //match api
      let token = app.$cookies.get('token')
      //add token
      if (token) config.headers.Authorization = token;
      //其他的請求前業(yè)務邏輯 比如：api map
      resolve(config);
    })
  });
  $axios.onResponse(res => {
    return new Promise((resolve, reject) => {
      //返回數(shù)據(jù)邏輯處理 比如：error_code錯誤處理
      resolve(res.data);
    })
  });
  $axios.onError(config => {
    console.log('Making request to ' + config.url)
  })
};

nuxt——nuxt.axios的使用

bug：localStorage不存在

在SSR中，created生命周期在服務端執(zhí)行，node環(huán)境中沒有l(wèi)ocalStorage所以會報錯，

將需要使用localStorage的代碼放到瀏覽器使用的生命周期(mounted)中。

配置文件配置axios文件不在服務端渲染 { src: ‘@/plugins/axios’, ssr: false }

axios封裝 plugins/axios.js

import { Message, Notification } from 'element-ui'
import Cookie from 'js-cookie'
export default function (app) {
  const axios = app.$axios
  // 基本配置
  axios.defaults.timeout = 10000
  axios.defaults.headers.post['Content-Type'] = 'application/json'
  axios.defaults.headers.patch['Content-Type'] = 'application/json'
  axios.defaults.headers.put['Content-Type'] = 'application/json'
  // 請求回調（若token從localStorage獲取，接口只能在mounted之后調用）
  axios.onRequest((config) => {
    const token = Cookie.get('token')
    config.headers.Authorization = token 
  })
  // 返回回調
  axios.onResponse((response) => {
    console.log(8888,response.data)
    if (response.data.code === 200) {
      return Promise.resolve(response.data)
    } else if (response.data.code === 401) {
      Message.error('請登錄后再操作');
    } else {
      Message.error(response.data.msg);
      return Promise.reject(response.data)
    }
  })
  // 錯誤回調
  axios.onError((error) => {
    switch (error.response.status) {
      case 401:
        location.href = '/login'
        break
    }
  })
}
// 	nuxt.config.js
plugins: [
    '@/plugins/element-ui',
    '@/plugins/axios',
    //{ src: '@/plugins/axios', ssr: false } 關閉服務端渲染
  ],
//找到modules模塊，把proxy添加到里面
 modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
 axios: {
    proxy: true // Can be also an object with default options
  },
  proxy: {
      '/api': {
      changeOrigin: true,
      target: 'http://127.0.0.1:8082', // 允許跨域的服務器地址
      pathRewrite: {
        '^/api': ''
      }
     }
 }

調用接口

  async asyncData ({ params, $axios }) {
    const { data } = await $axios.get(`/articles/index?pageIndex=1`)
    return { data, page: 1 }
  }
  this.$axios.post('url', {})
  this.$axios.get('url', { params:{} })
  async asyncData ({ params, $axios }) {
    const [articles, category] = await Promise.all([
      $axios.$get(`/articles/category/${params.id}`),
      $axios.$get(`/categories/${params.id}`)
    ])
  }