Detailed graphic explanation of the use of axios interceptor in vue

This time I will bring you a detailed picture and text explanation of the use of axios interceptor in vue. What are the precautions for using axios interceptor in vue. The following is a practical case, let's take a look.

axios in vue does not support vue.use() method declaration. So there are two ways to solve this:

The first one: Introduced in main.js axios, and then set it as a property on the vue prototype chain, so that this.axios can be used directly in the component

import axios from 'axios';
Vue.prototype.axios=axios;

components:

this.axios({
    url:"a.xxx",
    method:'post',
    data:{
      id:3,
      name:'jack'
    }
  })
  .then(function(res){
    console.log(res);
  })
  .catch(function(err){
    console.log(err);
  })
 }

Required here One thing to note is that it is invalid to use this to copy the requested data to data in Axios. You can use arrow functions to solve this problem.

The local proxy cross-domain problem when the vue cli scaffolding front-end adjusts the back-end data interface, for example, when I access the interface on localhost http://10.1.5.11:8080/xxx/duty?time=2017-07- 07 14:57:22', it must be accessed across domains. If accessed directly, XMLHTTPRequest can not load will be reported http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14: 57:22'. Response to preflight request doesn't pass access control….

Why is there a cross-domain problem? Because this is non-original communication, you can go to Google to learn more about it. Here you only need to configure the proxyTable in webpack. Find index.js in the config as follows:

config/index.js

dev: {
  proxyTable: {
   '/api': {
    target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号 
    changeOrigin: true,   //跨域
    pathRewrite: {
     '^/api': '/'     //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'，直接写‘/api/xxx/duty?time=2017-07-07 14:57:22'即可
    }
   }

Cross-domain is successful, but this only solves the cross-domain problem in the development environment (dev). In the production environment, if it is actually deployed on the server, there will still be cross-domain problems if it is not from the same origin. For example, if we deploy The server port is 3001, which requires front-end and back-end joint debugging. In the first step, we can test the front-end in two environments: production and development. In config/dev.env.js and prod.env.js, it is development/production. Configure the requested address API_HOST respectively in the environment. In the development environment, we use the proxy address api configured above, and in the production environment, we use the normal interface address, so configure it like this, respectively in config/dev.env.js and prod.env.js Make the following configurations in both files.

config/dev.env.js：

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',//开发环境
 API_HOST:"/api/"
})

prod.env.js

module.exports = {
 NODE_ENV: '"production"',//生产环境
 API_HOST:'"http://10.1.5.11:8080/"'
}

Of course, whether it is development or The production environment can directly request http://10.1.5.11:8080//. After configuration, when testing, the program will automatically determine whether the current environment is development or production, and then automatically match API_HOST. We can use process.env.API_HOST in any component to use the address such as:

instance.post(process.env.API_HOST+'user/login', this.form)

Then the second step The back-end server can configure cros cross-domain, which is access-control-allow-origin: * means allowing all access. To sum up: In the development environment, our front-end can configure a proxy to cross-domain. In a real production environment, we need the cooperation of the back-end. A certain expert said: This method is not easy to use in IE9 and below. If compatibility is required, the best way is to add a proxy to the server port on the backend. The effect is similar to the webpack proxy during development.

axios sends get post request Question

When sending a post request, you generally need to set Content-Type, the type of content to be sent, application/json It means sending a json object but stringifying it in advance. application/xxxx-form refers to sending? In the format of a=b&c=d, you can use the qs method to format it. qs will be installed automatically after installing axios. You only need to import it in the component.

const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'}
const postData=Qs.stringify(this.formCustomer);//过滤成？&=格式
'Content-Type':'application/xxxx-form'}

Use of interceptor

#When we access an address page, we are sometimes asked to log in again before accessing the page. That is to say, the identity authentication fails, such as the token is lost, or the token still exists locally, but it has failed, so simply judging whether there is a local token value cannot solve the problem. At this time, the server returns a 401 error when requesting, indicating an authorization error, that is, there is no right to access the page.

We can filter this situation before sending all requests and before operating the server response data.

// http request 请求拦截器，有token值则配置上token值
axios.interceptors.request.use(
  config => {
    if (token) { // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
      config.headers.Authorization = token;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });
// http response 服务器响应拦截器，这里拦截401错误，并重新跳入登页重新获取token
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 这里写清除token的代码
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.fullPath}  //登录成功后跳入浏览的当前页面
          })
      }
    }
    return Promise.reject(error.response.data) 
  });

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to implement the starry navigation bar in JS

How vue and vue-i18n implement background data Multi-language switching

The above is the detailed content of Detailed graphic explanation of the use of axios interceptor in vue. For more information, please follow other related articles on the PHP Chinese website!