Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What is the configuration method of the vue request interceptor

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

This article introduces you what is the configuration method of vue request interceptor, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Request.js content

Http request request interceptor and http response server response interceptor configuration

/ / http request request interceptor. If there is a token value, configure the token value import axios from 'axios'import Promise from' promise'import util from'. / utils';import store from'. /.. / store/index';const service = axios.create ({timeout: 60000, / / request timeout headers: {/ / Authorization: Authorization, 'Content-Type':' application/json;charset=UTF-8'}}) / / http request interceptor service.interceptors.request.use (config = > {let tokenExist = util.tokenExist (); if (tokenExist) {/ / bus.$emit ('toggleloading', true) / / display loading / / if config.headers [' Authorization'] = `Bearer ${util.getToken ()} `exists in token } / / Toast.loading ({/ / message: 'loading...', / / duration: 0, / / forbidClick: true / /}); return config;}, error = > {Promise.reject (error) }) / / the http response server responds to the interceptor, / / intercepts the 401error here and jumps back to the login page to get the tokenservice.interceptors.response.use (response = > {if (response.status = 200) {/ / successful communication / / Toast.clear () / * * response.data.status = = 0 error * response.data.status = = 100success * response.data.status = = 401token expired * / / bus.$emit ('toggleloading' False) / / hide loading if (response.data.state = 401) {/ / if token expires Jump to login Message.error ("login has expired, please log in again!") ; store.commit ('SET_TOKEN','); util.goLogin ();} else if (response.data.state = 0) {/ / Message.error (response.data.message); return response.data;} else {return response.data }, error = > {/ / request failed / /; const response = error.response; if (response.status = 401) {/ / Toast.fail (response.data.message); Message.error ("login has expired, please log in again!") ; util.goLogin ();} else if (response.status = 403) {$router.push ({name: '403'});} else {/ / Toast.fail (response.data.message? Response.data.message: 'system error Please contact administrator'); / / Message.error ({/ / message:'no service, contact administrator'/ /});} return Promise.reject (error);}); export default service

Http.js content

Request data mode

Import request from'. / request';// import store from'. /.. / store/index';const http = {request (config) {request (config);}, post (url, data) {/ / if (data instanceof Object) {/ /} else {/ / data = {/ /. Data / /} / /} return request ({url, method: 'post', data});}, postFile (url, data, contentType) {return request ({url, method:' post', data, contentType}) }, get (url, params) {return request ({url, method: 'get', params});}, put (url, data) {return request ({url, method:' put', data}) }, delete (url) {return request ({url, method: 'delete'});}, download (url, params) {return request ({url, method:' get', params, responseType: 'blob'}) }, downloadPost (url, data) {return request ({url, method: 'post', data, responseType:' blob'});}; export default http

Utils.js content

Get token to determine whether token exists

Import store from'.. / store/index';let util = {/ / get token getToken () {return store.getters.token;}, / / determine whether the token exists tokenExist () {let flag; let token = store.getters.token; if (token & & token! = ='') {flag = true;} else {flag = false } return token;},} export default util

Vuex warehouse configuration

Vuex persistence

Vuex template reference

Index.js content

Import Vue from "vue" import Vuex from "vuex" import VuexPersistence from 'vuex-persist';import db from'. / db'Vue.use (Vuex) / / vuex status persistence const vuexLocal = new VuexPersistence ({storage:window.localStorage}) const store = new Vuex.Store ({state: {}, mutations: {}, actions: {}, modules: {db}, plugins: [vuexLocal.plugin]}) export default store

Db.js content

Const db = {state: {token:',}, getters: {token:state = > state.token}, mutations: {/ / Storage token setToken: (state, value) = > {state.token = value}}, actions: {}} export default db

Interface encapsulation

Import http from ".. / common/http" / * login registration * / / Test interface function text (params) {return http.get ("api/Test/GetList", params)} / / Log in to function Login (params) {return http.post ("api/Login/Login") Params)} / / get the graphic verification code function GetValidateCode (params) {return http.post ("api/Login/GetValidateCode", params)} / / get the mobile phone verification code Note: it needs to be called after man-machine verification in advance, otherwise there is a risk of malicious SMS function GetPhoneCode (params) {return http.post ("api/Login/GetPhoneCode") Params)} / / Registration verification information function RegisterUserVerify (params) {return http.post ("api/Login/RegisterUserVerify", params)} / / Registration setting password Registration user Information function RegisterUserInfo (params) {return http.post ("api/Login/RegisterUserInfo", params)} / / forgot password authentication name Mobile number function ResetPasswordVerify (params) {return http.post ("api/Login/ResetPasswordVerify") Params)} / / forgot password update function ResetPassWord (params) {return http.post ("api/Login/ResetPassWord", params)} export {Login, text, GetPhoneCode, RegisterUserVerify, GetValidateCode, ResetPasswordVerify, ResetPassWord, RegisterUserInfo} what is the configuration method for vue request interceptor? that's it. I hope the above content can be of some help to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report