service.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. import axios from 'axios'
  2. import Snackbar from '@/plugins/snackbar'
  3. import Confirm from '@/plugins/confirm'
  4. import qs from 'qs'
  5. import { config } from '@/config/axios/config'
  6. import { getCurrentLocaleLang } from '@/utils/lang'
  7. import { getToken, getRefreshToken, getTenantId, removeToken, setToken } from '@/utils/auth'
  8. // import { getToken, getRefreshToken, getTenantId, removeToken, setToken } from '@/utils/auth'
  9. import errorCode from './errorCode'
  10. import { useI18n } from '@/hooks/web/useI18n'
  11. // import { resetRouter } from '@/router'
  12. // import { deleteUserCache } from '@/hooks/web/useCache'
  13. const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE
  14. const { result_code, base_url, request_timeout } = config
  15. // 需要忽略的提示。忽略后,自动 Promise.reject('error')
  16. const ignoreMsgs = [
  17. '无效的刷新令牌', // 刷新令牌被删除时,不用提示
  18. '刷新令牌已过期' // 使用刷新令牌,刷新获取新的访问令牌时,结果因为过期失败,此时需要忽略。否则,会导致继续 401,无法跳转到登出界面
  19. ]
  20. // 是否显示重新登录
  21. export const isReLogin = { show: false }
  22. // Axios 无感知刷新令牌,参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
  23. // 请求队列
  24. let requestList = []
  25. // 是否正在刷新中
  26. let isRefreshToken = false
  27. // 请求白名单,无须token的接口
  28. const whiteList = ['/login', '/refresh-token']
  29. // 创建axios实例
  30. const service = axios.create({
  31. baseURL: base_url, // api 的 base_url
  32. timeout: request_timeout, // 请求超时时间
  33. withCredentials: false // 禁用 Cookie 等信息
  34. })
  35. // request拦截器
  36. service.interceptors.request.use(
  37. (config) => {
  38. config.headers['Accept-Language'] = getCurrentLocaleLang() ?? 'zh_CN'
  39. // 是否需要设置 token
  40. let isToken = (config.headers || {}).isToken === false
  41. whiteList.some((v) => {
  42. if (config.url) {
  43. config.url.indexOf(v) > -1
  44. return (isToken = false)
  45. }
  46. })
  47. if (getToken() && !isToken) {
  48. ;(config).headers.Authorization = 'Bearer ' + getToken() // 让每个请求携带自定义token
  49. }
  50. // 设置租户
  51. if (tenantEnable && tenantEnable === 'true') {
  52. const tenantId = import.meta.env.VITE_TENANTCODE
  53. if (tenantId) config.headers['tenant-id'] = tenantId
  54. }
  55. const params = config.params || {}
  56. const data = config.data || false
  57. if (
  58. config.method?.toUpperCase() === 'POST' &&
  59. (config.headers)['Content-Type'] ===
  60. 'application/x-www-form-urlencoded'
  61. ) {
  62. config.data = qs.stringify(data)
  63. }
  64. // get参数编码
  65. if (config.method?.toUpperCase() === 'GET' && params) {
  66. config.params = {}
  67. const paramsStr = qs.stringify(params, { allowDots: true })
  68. if (paramsStr) {
  69. config.url = config.url + '?' + paramsStr
  70. }
  71. }
  72. return config
  73. },
  74. (error) => {
  75. // Do something with request error
  76. console.log(error) // for debug
  77. Promise.reject(error)
  78. }
  79. )
  80. // response 拦截器
  81. service.interceptors.response.use(
  82. async (response) => {
  83. const { t } = useI18n()
  84. let { data } = response
  85. const config = response.config
  86. if (!data) {
  87. // 返回“[HTTP]请求没有返回值”;
  88. throw new Error()
  89. }
  90. // 未设置状态码则默认成功状态
  91. // 二进制数据则直接返回,例如说 Excel 导出
  92. if (
  93. response.request.responseType === 'blob' ||
  94. response.request.responseType === 'arraybuffer'
  95. ) {
  96. // 注意:如果导出的响应为 json,说明可能失败了,不直接返回进行下载
  97. if (response.data.type !== 'application/json') {
  98. return response.data
  99. }
  100. data = await new Response(response.data).json()
  101. }
  102. const code = data.code || result_code
  103. // 获取错误信息
  104. const msg = data.msg || errorCode[code] || errorCode['default']
  105. if (ignoreMsgs.indexOf(msg) !== -1) {
  106. // 如果是忽略的错误码,直接返回 msg 异常
  107. return Promise.reject(msg)
  108. } else if (code === 401) {
  109. // 如果未认证,并且未进行刷新令牌,说明可能是访问令牌过期了
  110. if (!isRefreshToken) {
  111. isRefreshToken = true
  112. // 1. 如果获取不到刷新令牌,则只能执行登出操作
  113. if (!getRefreshToken()) {
  114. return handleAuthorized()
  115. }
  116. // 2. 进行刷新访问令牌
  117. try {
  118. const refreshTokenRes = await refreshToken()
  119. // 2.1 刷新成功,则回放队列的请求 + 当前请求
  120. setToken(refreshTokenRes.data.data)
  121. config.headers.Authorization = 'Bearer ' + getToken()
  122. requestList.forEach((cb) => {
  123. cb()
  124. })
  125. requestList = []
  126. return service(config)
  127. } catch (e) {
  128. // 为什么需要 catch 异常呢?刷新失败时,请求因为 Promise.reject 触发异常。
  129. // 2.2 刷新失败,只回放队列的请求
  130. requestList.forEach((cb) => {
  131. cb()
  132. })
  133. // 提示是否要登出。即不回放当前请求!不然会形成递归
  134. return handleAuthorized()
  135. } finally {
  136. requestList = []
  137. isRefreshToken = false
  138. }
  139. } else {
  140. // 添加到队列,等待刷新获取到新的令牌
  141. return new Promise((resolve) => {
  142. requestList.push(() => {
  143. config.headers.Authorization = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  144. resolve(service(config))
  145. })
  146. })
  147. }
  148. } else if (code === 500) {
  149. Snackbar.error(t('sys.api.errMsg500'))
  150. return Promise.reject(new Error(msg))
  151. } else if (code === 901) {
  152. Snackbar.error(t('sys.api.errMsg901'))
  153. return Promise.reject(new Error(msg))
  154. } else if (code !== 200) {
  155. if (msg === '无效的刷新令牌') {
  156. // hard coding:忽略这个提示,直接登出
  157. console.log(msg)
  158. }
  159. else {
  160. Snackbar.error(msg)
  161. }
  162. return Promise.reject(msg)
  163. } else {
  164. return data
  165. }
  166. },
  167. (error) => {
  168. const { t } = useI18n()
  169. // console.log('err' + error) // for debug
  170. let { message } = error
  171. if (message === 'Network Error') {
  172. message = t('sys.api.errorMessage')
  173. } else if (message.includes('timeout')) {
  174. message = t('sys.api.apiTimeoutMessage')
  175. } else if (message.includes('Request failed with status code')) {
  176. message = t('sys.api.apiRequestFailed') + message.substr(message.length - 3)
  177. }
  178. Snackbar.error(message)
  179. return Promise.reject(error)
  180. }
  181. )
  182. const refreshToken = async () => {
  183. axios.defaults.headers.common['tenant-id'] = getTenantId()
  184. return await axios.post(base_url + '/system/auth/refresh-token?refreshToken=' + getRefreshToken())
  185. }
  186. const handleAuthorized = () => {
  187. const { t } = useI18n()
  188. if (!isReLogin.show) {
  189. // 如果已经到重新登录页面则不进行弹窗提示
  190. if (window.location.href.includes('login?redirect=')) {
  191. return
  192. }
  193. isReLogin.show = true
  194. Confirm(t('common.confirmTitle'), t('sys.api.timeoutMessage')).then(() => {
  195. // resetRouter() // 重置静态路由表
  196. // deleteUserCache() // 删除用户缓存
  197. removeToken()
  198. isReLogin.show = false
  199. // 干掉token后再走一次路由让它过router.beforeEach的校验
  200. location.reload()
  201. })
  202. }
  203. return Promise.reject(t('sys.api.timeoutMessage'))
  204. }
  205. export { service }