Vue+axios for HTTP interception and routing interception

Today, every front end is no stranger to Vue, and the Vue framework is one of the most Popular front-end frameworks, and its momentum is chasing react. I recently made a project with Vue, and here's what I've learned from it.

There are a lot of documents for building projects with Vue+webpack now, and I'm not going to be too tired.

Technology stack

• vue2.0
• Vue-router
• Axios

Interception device

first, we need to understand what the purpose of setting up interceptors is, and when we need to handle HTTP requests and responses uniformly, we can do much more conveniently by setting up interceptors.

I introduced the element UI framework in this project, so I'm working with the loading and message components in element. We can create a separate HTTP JS file processing Axios, and then introduce it into main.js.

1 /**2 * HTTP Configuration3  */4 //introduction of the Axios and the loading and message components in the element UI5Import Axios from ' Axios '6Import {Loading, Message} from ' Element-ui '7 //Timeout period8Axios.defaults.timeout = 50009 //http request BlockerTen varLoadinginstace OneAxios.interceptors.request.use (config = { A   //element UI Loading method -Loadinginstace = Loading.service ({fullscreen:true }) -   returnConfig the}, Error = { - loadinginstace.close () - Message.error ({ -Message: ' Load timeout ' +   }) -   returnpromise.reject (Error) + }) A //http response blocker atAxios.interceptors.response.use (data = {//response successfully closed loading - loadinginstace.close () -   returnData -}, Error = { - loadinginstace.close () - Message.error ({ inMessage: ' Load failed ' -   }) to   returnpromise.reject (Error) + }) -  theExportdefaultAxios

This allows us to handle the interception of HTTP requests and responses in a unified way. Of course we can change the processing in interception according to the specific business requirements.

Routing interception

What can we do with routing interception? I think the most important thing is to control the authority, such as some pages need to log in to enter, some pages different identity rendering different. Let's talk about login interception in a nutshell.

1Import vue from ' Vue '2Import Router from ' Vue-router '3 4 vue.use (Router)5 6Const ROUTER =NewRouter ({7 routes: [8     {9Path: '/',Ten       /* One * Load on Demand A       */ -Component: (Resolve) = { -Require (['.. /components/home '], resolve) the       } -     }, { -Path: '/record ', -Name: ' Record ', +Component: (Resolve) = { -Require (['.. /components/record '], resolve) +       } A     }, { atPath: '/register ', -Name: ' Register ', -Component: (Resolve) = { -Require (['.. /components/register '], resolve) -       } -     }, { inPath: '/luck ', -Name: ' Luck ',
Pages that require login to enter can add a meta attribute to Meta: { +Requireauth:true -       }, theComponent: (Resolve) = { *Require (['.. /components/luck28/luck '], resolve) $       }Panax Notoginseng     } -   ] the }) + //Determine if logon permissions are required and whether to log on ARouter.beforeeach (to, from, next) = = { the   if(Res-= To.matched.someRes.meta.requireAuth)) {//Determine if login rights are required +     if(Localstorage.getitem (' username ') {//Determine if login - Next () $}Else{//not logged in will jump to login screen $ Next ({ -Path: '/register ', - query: {redirect:to.fullPath} the       }) -     }Wuyi}Else { the Next () -   } Wu }) -  AboutExportdefaultRouter

This completes the login interception. We just need to introduce router in the main.js.

Implementing control of permissions We can also do this through VUEX, but there's no need to introduce VUEX if it's a small project.

The above is my project in the process of some of the harvest, because into the hole in Vue is only two months, some places may have shortcomings, welcome to correct me, I will listen carefully.

Vue+axios for HTTP interception and routing interception