Blame view

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

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

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