Blame view

src/utils/request.js 4.51 KB
80a28914e   吉鹏   init
1
  import axios from 'axios'
50760eab9   Adam   auto commit the c...
2
3
4
5
6
7
8
  import qs from 'qs'
  import {
    MessageBox,
    Message,
    // Loading,
    Notification
  } from 'element-ui'
80a28914e   吉鹏   init
9
  import store from '@/store'
50760eab9   Adam   auto commit the c...
10
11
12
  import {
    getToken
  } from '@/utils/auth'
80a28914e   吉鹏   init
13
14
15
16
  
  // create an axios instance
  const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
50760eab9   Adam   auto commit the c...
17
18
    withCredentials: true, // send cookies when cross-domain requests
    timeout: 3000 // request timeout
80a28914e   吉鹏   init
19
  })
50760eab9   Adam   auto commit the c...
20
  // let loadingInstance
80a28914e   吉鹏   init
21
22
23
  // request interceptor
  service.interceptors.request.use(
    config => {
50760eab9   Adam   auto commit the c...
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
58
59
60
      const token = sessionStorage.getItem('access_token')
      // const csrf = store.getters.csrf
      if (token) {
        config.headers = {
          'access-token': token,
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
      if (config.url === 'refresh') {
        config.headers = {
          'refresh-token': sessionStorage.getItem('refresh_token'),
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
      // let options = {
      //   lock: true,
      //   fullscreen: false,
      //   text: '数据加载中……',
      //   // background: '#FFCC00',
      //   spinner: 'el-icon-loading'
      // };
      const options = {
        type: 'success',
        message: config.url,
        title: 'request axios ',
        showClose: true,
        duration: 3000
      }
      Notification(options)
      // loadingInstance = Loading.service(options);
      config.method === 'post'
        ? config.data = qs.stringify({
          ...config.data
        })
        : config.params = {
          ...config.params
        }
80a28914e   吉鹏   init
61
62
63
64
      if (store.getters.token) {
        // let each request carry token
        // ['X-Token'] is a custom headers key
        // please modify it according to the actual situation
d7d9c38c2   Adam   auto commit the c...
65
        config.headers['X-Token'] = getToken()
80a28914e   吉鹏   init
66
      }
50760eab9   Adam   auto commit the c...
67
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
80a28914e   吉鹏   init
68
      return config
50760eab9   Adam   auto commit the c...
69
      // do something before request is sent
80a28914e   吉鹏   init
70
71
72
    },
    error => {
      // do something with request error
50760eab9   Adam   auto commit the c...
73
74
75
76
77
      Message({
        message: error || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
d7d9c38c2   Adam   auto commit the c...
78
      console.log(error) // for debug
80a28914e   吉鹏   init
79
80
81
82
83
84
85
86
87
      return Promise.reject(error)
    }
  )
  
  // response interceptor
  service.interceptors.response.use(
    /**
     * If you want to get http information such as headers or status
     * Please return  response => response
50760eab9   Adam   auto commit the c...
88
     */
80a28914e   吉鹏   init
89
90
91
92
93
94
95
  
    /**
     * Determine the request status by custom code
     * Here is just an example
     * You can also judge the status by HTTP Status Code
     */
    response => {
50760eab9   Adam   auto commit the c...
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
      const options = {
        type: 'error',
        message: response.status,
        title: 'response status value ',
        showClose: true,
        duration: 1000
      }
      Notification(options)
      // Notification.close()
      // 这里根据后端提供的数据进行对应的处理
      console.log('response===>', response)
      // 定时刷新access-token
      // if (!response.data.value && response.data.data.message === 'token invalid') {
      //   // 刷新token
      //   store.dispatch('refresh').then(response => {
      //   sessionStorage.setItem('access_token', response.data)
      //   }).catch(error => {
      //   throw new Error('token刷新' + error)
      //   })
      // }
80a28914e   吉鹏   init
116
      const res = response.data
d7d9c38c2   Adam   auto commit the c...
117
118
  
      // if the custom code is not 20000, it is judged as an error.
80a28914e   吉鹏   init
119
120
121
122
123
124
      if (res.code !== 20000) {
        Message({
          message: res.message || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
d7d9c38c2   Adam   auto commit the c...
125
        // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
80a28914e   吉鹏   init
126
127
        if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
          // to re-login
d7d9c38c2   Adam   auto commit the c...
128
129
130
          MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
            confirmButtonText: 'Re-Login',
            cancelButtonText: 'Cancel',
80a28914e   吉鹏   init
131
132
133
            type: 'warning'
          }).then(() => {
            store.dispatch('user/resetToken').then(() => {
d7d9c38c2   Adam   auto commit the c...
134
              location.reload()
80a28914e   吉鹏   init
135
136
137
138
139
            })
          })
        }
        return Promise.reject(new Error(res.message || 'Error'))
      } else {
d7d9c38c2   Adam   auto commit the c...
140
        return res
80a28914e   吉鹏   init
141
142
143
      }
    },
    error => {
50760eab9   Adam   auto commit the c...
144
145
146
147
148
149
150
      console.log('error', error)
      // console.log(JSON.stringify(error));
      // 500的状态也应该处理一下
      // 401-403的状态也应该处理一下
      const text = JSON.parse(JSON.stringify(error)).response.status === 404
        ? '404'
        : '网络异常,请重试'
d7d9c38c2   Adam   auto commit the c...
151
      Message({
50760eab9   Adam   auto commit the c...
152
        message: text || 'Error',
d7d9c38c2   Adam   auto commit the c...
153
154
155
        type: 'error',
        duration: 5 * 1000
      })
50760eab9   Adam   auto commit the c...
156

80a28914e   吉鹏   init
157
158
159
      return Promise.reject(error)
    }
  )
50760eab9   Adam   auto commit the c...
160
161
  // 假设你想移除拦截器
  // axios.interceptors.request.eject(service);
80a28914e   吉鹏   init
162
  export default service