How to configure token for Axios interceptor in Vue

After understanding the functions of cookie, session and token, learn how to use token

cookie

Cookie sends parameters to the background with the URL, which has the lowest security and limited size, no more than 4KB. Its data is stored in the client

session

The session data is stored in the server and a space is opened up in the memory to store the data. The session file name, that is, the session ID, is stored in the cookie. After the cookie is sent to the server, the session file is matched on the server

token

Token is an algorithm of the server. If the login is successful, the server will generate a string according to the algorithm and pass the string back to the client. This string is the token, which has the highest security

All of the above may be attacked by CSRF

Axios interceptor will process the request before sending it, put the token into the key and save it in the request header, which is agreed by the front and back office. After this configuration, every time a request is sent, the request header will carry the token and send it to the background for verification.

Features of Axios (official website)

• Support browser and node.js
• Promise support
• It can intercept requests and responses
• Can convert request and response data
• Can I cancel the request
• Automatic conversion of JSON data
• Browser side support to prevent CSRF (Cross Site Request Forgery)

Method 1: when using Axios request, we can first obtain the token that we have stored in localstorage

Then use […] in the interceptor ]Splicing

import axios from 'axios';
import qs from 'qs';
axios.defaults.baseURL = process.env.VUE_APP_BASE_API;
let token = localStorage.getItem('token')
// Add a request interceptor
axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  //console.log(config)
  if(config.method==='post'){
    config.data=qs.stringify({
      token:token,
      ...config.data
    })
  }else if(config.method==='get'){
    config.params={
      token:token,
      ...config.params
    }
  }
  return config;
 }, function (error) {
  // Do something with request error
  return Promise.reject(error);
 });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
  // Do something with response data
  return response;
 }, function (error) {
  // Do something with response error
  return Promise.reject(error);
 });

 class http{
   static get(url,params){
     return axios.get(url,params)
   }
   static post(url,params){
    return axios.post(url,params)
  }
 }
 export default http;

Method 2

Axios modify global default configuration:

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

Axios configuration Interceptor:

//Add a request interceptor
axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  return config;
　　//It is often used with token. Configure the token value to the token key and put the token key in the request header
　　config.headers['Authorization'] = token;
　　
 }, function (error) {
  // Do something with request error
  return Promise.reject(error);
 });

//Add a response interceptor
axios.interceptors.response.use(function (response) {
  // Do something with response data
  return response;
 }, function (error) {
  // Do something with response error
  return Promise.reject(error);
 });

These two methods allow us to splice tokens in Axios interceptor instead of adding a token value to every request

summary

The above is Xiaobian’s introduction of how to configure the token for Axios interceptor in Vue. I hope it can help you. If you have any questions, please leave me a message and Xiaobian will reply you in time. Thank you very much for your support to developer!
If you think this article is helpful to you, please reprint, please indicate the source, thank you!