How to request intercept by vuejs

This article describes in detail the corresponding analysis and answers to the question of how to intercept vuejs requests, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

The methods to intercept vuejs requests are as follows: 1. Create a utils folder under the src folder; 2. Create request.js and auth.js files under the folder; 3. Download axios;4 and create an instance to intercept requests.

This article operating environment: windows7 system, Vue2.9.6 version, DELL G3 computer.

How does vuejs request intercept?

Specific code for intercepting vue data requests

Create a utils folder under the src folder

Create both request.js and auth.js files under the folder

Request.js is the main entry for request interception and request data encapsulation.

Auth.js encapsulates the main entry for setting token and deleting token and judging whether the user is logged in

Auth.js (encapsulated token)

Export function isLogin () {if (localStorage.getItem ('token')) {return true;} else {return false;}} export function getToken () {return localStorage.getItem (' token');} export function setToken (token) {localStorage.setItem ('token', token);} export function removeToken () {localStorage.removeItem (' token');}

Download axios (command: npm install axios-- save-dev) and introduce axios and getToken at the same time

Import axios from 'axios';import {getToken} from'. / auth'

Create an instance: pass two parameters (timeout (timeout) and baseUrl (server path))

Const instance = axios.create ({timeout: 5000, baseURL: 'https://xxxxxxxxx/xxxx/',})

Request intercept

/ / request interception instance.interceptors.request.use (function (config) {/ / eslint-disable-next-line prettier/prettier config.headers.authorization = 'Bearer' + getToken (); return config;}, function (error) {/ / Do something with request error return Promise.reject (error);}); instance.interceptors.response.use (response = > {return response) }, error = > {if (error.response.status = = 401) {_ window.location.href ='/ # / login';} if (error.response.status = = 404) {_ window.location.href ='/ 404.html;} return Promise.reject (error.response.data);})

Request encapsulation

/ * get request to obtain data * @ param {*} url * @ param {*} config * / export const get = (url, config) = > instance.get (url, config); / * post request * @ param {*} url * @ param {*} data * @ param {*} config * / export const post = (url, data) = > instance.post (url, data) / * put * @ param {*} url * @ param {*} data * @ param {*} config * / export const put = (url, data, config) = > instance.put (url, data, config); / * * delete * @ param {*} url * @ param {*} config * / export const remove = (url, config) = > instance.delete (url, config)

This is the end of the answer to the question about how to intercept vuejs. I hope the above content can be of some help to you. If you still have a lot of questions to solve, you can follow the industry information channel for more related knowledge.