In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
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.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.