Blame view

src/utils/request.js 4.7 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

a6e433928   Adam   auto commit the c...
14
15
  // const baseUrl = 'http://localhost/sys-glass/api';
  const baseUrl = process.env.VUE_APP_BASE_API // url = base url + request url
80a28914e   吉鹏   init
16
17
  // create an axios instance
  const service = axios.create({
a6e433928   Adam   auto commit the c...
18
19
    // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    baseURL: baseUrl, // url = base url + request url
50760eab9   Adam   auto commit the c...
20
21
    withCredentials: true, // send cookies when cross-domain requests
    timeout: 3000 // request timeout
80a28914e   吉鹏   init
22
  })
50760eab9   Adam   auto commit the c...
23
  // let loadingInstance
80a28914e   吉鹏   init
24
25
26
  // request interceptor
  service.interceptors.request.use(
    config => {
50760eab9   Adam   auto commit the c...
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
      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',
a6e433928   Adam   auto commit the c...
50
        message: baseUrl + config.url,
50760eab9   Adam   auto commit the c...
51
52
53
54
55
56
57
58
59
60
61
62
63
        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
64
65
66
67
      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...
68
        config.headers['X-Token'] = getToken()
80a28914e   吉鹏   init
69
      }
50760eab9   Adam   auto commit the c...
70
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
80a28914e   吉鹏   init
71
      return config
50760eab9   Adam   auto commit the c...
72
      // do something before request is sent
80a28914e   吉鹏   init
73
74
75
    },
    error => {
      // do something with request error
50760eab9   Adam   auto commit the c...
76
77
78
79
80
      Message({
        message: error || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
d7d9c38c2   Adam   auto commit the c...
81
      console.log(error) // for debug
80a28914e   吉鹏   init
82
83
84
85
86
87
88
89
90
      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...
91
     */
80a28914e   吉鹏   init
92
93
94
95
96
97
98
  
    /**
     * 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...
99
100
101
102
103
104
105
106
107
      const options = {
        type: 'error',
        message: response.status,
        title: 'response status value ',
        showClose: true,
        duration: 1000
      }
      Notification(options)
      // Notification.close()
a6e433928   Adam   auto commit the c...
108

50760eab9   Adam   auto commit the c...
109
110
111
112
113
114
115
116
117
118
119
      // 这里根据后端提供的数据进行对应的处理
      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
120
      const res = response.data
d7d9c38c2   Adam   auto commit the c...
121
122
  
      // if the custom code is not 20000, it is judged as an error.
80a28914e   吉鹏   init
123
124
125
126
127
128
      if (res.code !== 20000) {
        Message({
          message: res.message || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
d7d9c38c2   Adam   auto commit the c...
129
        // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
80a28914e   吉鹏   init
130
131
        if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
          // to re-login
d7d9c38c2   Adam   auto commit the c...
132
133
134
          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
135
136
137
            type: 'warning'
          }).then(() => {
            store.dispatch('user/resetToken').then(() => {
d7d9c38c2   Adam   auto commit the c...
138
              location.reload()
80a28914e   吉鹏   init
139
140
141
142
143
            })
          })
        }
        return Promise.reject(new Error(res.message || 'Error'))
      } else {
d7d9c38c2   Adam   auto commit the c...
144
        return res
80a28914e   吉鹏   init
145
146
147
      }
    },
    error => {
50760eab9   Adam   auto commit the c...
148
149
150
151
152
153
154
      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...
155
      Message({
50760eab9   Adam   auto commit the c...
156
        message: text || 'Error',
d7d9c38c2   Adam   auto commit the c...
157
158
159
        type: 'error',
        duration: 5 * 1000
      })
50760eab9   Adam   auto commit the c...
160

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