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 Config 3 *  /4//Introduce Axios and the Loading and message components in element UI 5 import Axios from ' Axios ' 6 import {Loading, Message} from ' Element-ui ' 7//timeout time 8 axios.defaults.timeout = 9//HTTP request interceptor Var loadinginstace11 axios.intercep Tors.request.use (config = {   //Element UI Loading method   Loadinginstace = Loading.service ({fullscreen:true })   return config15}, error = {   loadinginstace.close ()   message.error ({     $ Message: ' Load timeout ' 19   })   return Promise.reject (Error)) (+//HTTP response Interceptor Axios.interceptors.response.use (data = {// Response successfully closed Loading24   loadinginstace.close ()   return Data26}, error = {   Loadinginstace.close () 28   message.error ({     Message: ' Failed to load '   ) '   return Promise.reject (Error) ') ' Export default ' Axios

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.

1 Import vue from ' Vue ' 2 import Router from ' Vue-router ' 3 4 vue.use (Router) 5 6 Const Router = new Router ({7 routes : [8 {9 path: '/', 10/*11 * load on Demand */13 component: (Resolve) = + Requi Re (['.. /components/home '], resolve)}16}, {path: '/record ', + Name: ' Record ', Component: (res Olve) = {require ([' ...] /components/record '], resolve)}22}, {% path: '/register ', ' Name: ' Register ', component : (Resolve) = = {require ([' ...] /components/register '], resolve)}28}, {path: '/luck ', '-Name: ' Luck ',
Pages that require login to enter can add a meta attribute to meta: {requireauth:true33},34 component: (resolve) = {35 Require (['.. /components/luck28/luck '], resolve) 36}37}38]39}) 40//Determine if login permissions are required and whether to log in to the Router.beforeeach (to, from, NE XT) = = (To.matched.some (res = Res.meta.requireAuth)) {//Determines if login permission is required if (Localstorage.getitem (' Userna Me ') {//To determine if you are logged on to next () or else {//not logged in will jump to login interface ({path: '/register ', + +: {redirect:to.fullpath}49})}51} else {* Next ()}54}) in the export default router

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