Vue+axios implements http interception and routing interception

Nowadays, every front-end is no stranger to Vue. The Vue framework is one of the most popular front-end frameworks today, and its momentum is catching up with react. I recently made a project with vue, and the following are some of the gains I got from it.

 Based on the documentation of building projects with vue+webpack, there are already many documents, so I will not repeat them.

  technology stack

• view2.0
• vue-router
• axios

  interceptor

    First of all, we need to understand what the purpose of setting interceptors is. When we need to uniformly process http requests and responses, it is much more convenient for us to set up interceptors.

    In this project, I introduced the element ui framework, so I dealt with the loading and message components in element. We can create a separate http js file to process axios, and then introduce it into main.js.

    

1  /* *
 2  * http configuration
 3   */ 
4  // Introduce axios and 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 = 5000
 9  // http request interceptor 
10  var loadinginstace
 11 axios.interceptors.request.use(config => {
 12    // element ui Loading method 
13    loadinginstace = Loading.service({ fullscreen: true } )
 14    returnconfig
 15 }, error => {
 16    loadinginstace.close()
 17    Message.error({
 18      message: 'Loading timed out'
 19    })
 20    return Promise.reject(error)
 21  })
 22  // http response interceptor 
23 axios .interceptors.response.use(data => { // response successfully closed loading 
24    loadinginstace.close()
 25    return data
 26 }, error => {
 27    loadinginstace.close()
 28    Message.error({
 29      message: 'Loading fail'
 30   })
31   return Promise.reject(error)
32 })
33 
34 export default axios

 

   In this way, we uniformly handle the interception of http requests and responses. Of course, we can change the processing in interception according to specific business requirements.

 route interception

    What can we do through routing interception? I think the most important thing is to control permissions. For example, some pages need to be logged in to enter, and some pages are rendered differently for different identities. Next, let’s briefly talk about login interception.

    

 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       *  按需加载 
12       */
13       component: (resolve) => {
14         require(['../components/Home'], resolve)
15       }
16     }, {
17       path: '/record',
18       name: 'record',
19       component: (resolve) => {
20         require(['../components/Record'], resolve)
21       }
22     }, {
23       path: '/Register',
24       name: 'Register',
25       component: (resolve) => {
26         require(['../components/Register'], resolve)
27       }
28     }, {
29       path: '/Luck',
30       name: 'Luck', 
        // Pages that require login to enter can add a meta attribute
31        meta: { 
 32          requireAuth: true 
33        },
 34        component: (resolve) => {
 35          require(['../components/luck28/Luck' ], resolve)
 36        }
 37      }
 38    ]
 39  })
 40  //   Determine whether login permission is required and whether to log in 
41 router.beforeEach((to, from, next) => {
 42    if (to.matched.some(res => res.meta.requireAuth)) {// Determine whether login permission is required
 43      if (localStorage.getItem('username' )) {// Determine whether to log
 in 44        next()
45      } else {// If not logged in, jump to the login interface
 46        next({
 47          path: '/Register' ,
 48          query: {redirect: to.fullPath}
 49        })
 50      }
 51    } else {
 52      next()
 53    }
 54  })
 55  
56 export default router