nuxt implements encapsulation of axios and obtains token

nuxt encapsulate axios and get token

axios multi-link variable configuration different addresses

npm installation method

npm i --D cross-env

  "scripts": {
    "dev": "cross-env .__ENV=Test address nuxt",
    "build": "cross-env .__ENV=Package address nuxt build",
    "start": "nuxt start",
    "export": "nuxt export",
    "serve": "nuxt serve"
  },

Configuration

env: {
  __ENV: .__ENV
},

When using axios globally

?=?.__ENV

nuxt server brings token when making a request

Expected result: bring token when requesting on the server or client

Implementation method: Put the requested cookie in the header

If you do not install cookie-universal-nuxt, you need to install a plug-in

//Revise//Add module  modules: [
    'cookie-universal-nuxt',
    "@nuxtjs/axios",
  ]
//Add plugin reference  plugins:[
    '@/plugins/axios',
  ]

//Add plugins/let isClient = .VUE_ENV === 'client' //Distinguish the endexport default ({ redirect, $axios, app }) =&gt; {
  $(config =&gt; {
    return new Promise((resolve, reject) =&gt; {
      //match api
      let token = app.$('token')
      //add token
      if (token)  = token;
      //Other pre-request business logic, such as: api map      resolve(config);
    })
  });
  $(res =&gt; {
    return new Promise((resolve, reject) =&gt; {
      //Return data logic processing, for example: error_code error processing      resolve();
    })
  });
  $(config =&gt; {
    ('Making request to ' + )
  })
};

nuxt---

Bug: localStorage does not exist

In SSR, the created life cycle is executed on the server side, and there is no localStorage in the node environment, so an error will be reported.

Put the code that needs to use localStorage into the life cycle of the browser.

Configuration file configuration axios file not rendered on the server { src: '@/plugins/axios', ssr: false }

axios package plugins/

import { Message, Notification } from 'element-ui'
import Cookie from 'js-cookie'
export default function (app) {
  const axios = app.$axios
  // Basic configuration   = 10000
  ['Content-Type'] = 'application/json'
  ['Content-Type'] = 'application/json'
  ['Content-Type'] = 'application/json'
  // Request a callback (if the token is obtained from localStorage, the interface can only be called after mounted)  ((config) =&gt; {
    const token = ('token')
     = token 
  })
  // Return to callback  ((response) =&gt; {
    (8888,)
    if ( === 200) {
      return ()
    } else if ( === 401) {
      ('Please log in before operating');
    } else {
      ();
      return ()
    }
  })
  // Error callback  ((error) =&gt; {
    switch () {
      case 401:
         = '/login'
        break
    }
  })
}
// 	
plugins: [
    '@/plugins/element-ui',
    '@/plugins/axios',
    //{ src: '@/plugins/axios', ssr: false } Close server rendering  ],
//Find the modules module and add proxy to it 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', // Allows cross-domain server addresses      pathRewrite: {
        '^/api': ''
      }
     }
 }

Calling the interface

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

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.