vue+axios+element-ui 实现ajax请求拦截和路由拦截_vue plus element axios el-upload 拦截文件流

原文链接 https://www.cnblogs.com/parkboyoung/p/6761863.html

ajax拦截器：
结合element-ui中loading和message组件来处理的，我们可以单独建立一个http的js文件处理axios，再到main.js中引入，统一处理http请求和响应：例如loadding图显示隐藏。

/**
 * http配置
 */
// 引入axios以及element ui中的loading和message组件
import axios from 'axios'
import { Loading, Message } from 'element-ui'
// 超时时间
axios.defaults.timeout = 5000
// http请求拦截器
var loadinginstace
axios.interceptors.request.use(config => {
  // element ui Loading方法
  loadinginstace = Loading.service({ fullscreen: true })
  return config
}, error => {
  loadinginstace.close()
  Message.error({
    message: '加载超时'
  })
  return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
  loadinginstace.close()
  return data
}, error => {
  loadinginstace.close()
  Message.error({
    message: '加载失败'
  })
  return Promise.reject(error)
})

export default axios
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

路由拦截

我们可以通过路由拦截做什么?我认为最主要的便是对权限的控制,比如有的页面需要登录了才能进入,有些页面不同身份渲染不同.接下来简单的讲一下登录拦截.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      /*
      *  按需加载 
      */
      component: (resolve) => {
        require(['../components/Home'], resolve)
      }
    }, {
      path: '/record',
      name: 'record',
      component: (resolve) => {
        require(['../components/Record'], resolve)
      }
    }, {
      path: '/Register',
      name: 'Register',
      component: (resolve) => {
        require(['../components/Register'], resolve)
      }
    }, {
      path: '/Luck',
      name: 'Luck', 
        // 需要登录才能进入的页面可以增加一个meta属性
      meta: { 
        requireAuth: true
      },
      component: (resolve) => {
        require(['../components/luck28/Luck'], resolve)
      }
    }
  ]
})
//  判断是否需要登录权限 以及是否登录
router.beforeEach((to, from, next) => {
  if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限
    if (localStorage.getItem('username')) {// 判断是否登录
      next()
    } else {// 没登录则跳转到登录界面
      next({
        path: '/Register',
        query: {redirect: to.fullPath}
      })
    }
  } else {
    next()
  }
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

这样就做好了登录拦截.我们只需在main.js中引入router就可以了.