service.ts 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. import axios, { AxiosError, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
  2. import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
  3. import qs from 'qs'
  4. import { config } from '@/config/axios/config'
  5. import { getAccessToken, getRefreshToken, getTenantId, removeToken, setToken } from '@/utils/auth'
  6. import errorCode from './errorCode'
  7. import { resetRouter } from '@/router'
  8. import { deleteUserCache } from '@/hooks/web/useCache'
  9. import {langHelper} from '@/utils/langHelper'
  10. import { useLocaleStore } from '@/store/modules/locale'
  11. const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE
  12. const { result_code, base_url, request_timeout } = config
  13. // const localeStore = useLocaleStore()
  14. // 需要忽略的提示。忽略后,自动 Promise.reject('error')
  15. const ignoreMsgs = [
  16. '无效的刷新令牌', // 刷新令牌被删除时,不用提示
  17. '刷新令牌已过期' // 使用刷新令牌,刷新获取新的访问令牌时,结果因为过期失败,此时需要忽略。否则,会导致继续 401,无法跳转到登出界面
  18. ]
  19. // 是否显示重新登录
  20. export const isRelogin = { show: false }
  21. // Axios 无感知刷新令牌,参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
  22. // 请求队列
  23. let requestList: any[] = []
  24. // 是否正在刷新中
  25. let isRefreshToken = false
  26. // 请求白名单,无须token的接口
  27. const whiteList: string[] = ['/login', '/refresh-token']
  28. // 创建axios实例
  29. const service: AxiosInstance = axios.create({
  30. baseURL: base_url, // api 的 base_url
  31. timeout: request_timeout, // 请求超时时间
  32. withCredentials: false, // 禁用 Cookie 等信息
  33. // 自定义参数序列化函数
  34. paramsSerializer: (params) => {
  35. return qs.stringify(params, { allowDots: true })
  36. }
  37. })
  38. // request拦截器
  39. service.interceptors.request.use(
  40. (config: InternalAxiosRequestConfig) => {
  41. // 是否需要设置 token
  42. let isToken = (config!.headers || {}).isToken === false
  43. whiteList.some((v) => {
  44. if (config.url && config.url.indexOf(v) > -1) {
  45. return (isToken = false)
  46. }
  47. })
  48. if (getAccessToken() && !isToken) {
  49. config.headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token
  50. }
  51. // 设置租户
  52. if (tenantEnable && tenantEnable === 'true') {
  53. const tenantId = getTenantId()
  54. if (tenantId) config.headers['tenant-id'] = tenantId
  55. }
  56. const method = config.method?.toUpperCase()
  57. // 防止 GET 请求缓存
  58. if (method === 'GET') {
  59. config.headers['Cache-Control'] = 'no-cache'
  60. config.headers['Pragma'] = 'no-cache'
  61. }
  62. // 自定义参数序列化函数
  63. else if (method === 'POST') {
  64. const contentType = config.headers['Content-Type'] || config.headers['content-type']
  65. if (contentType === 'application/x-www-form-urlencoded') {
  66. if (config.data && typeof config.data !== 'string') {
  67. config.data = qs.stringify(config.data)
  68. }
  69. }
  70. }
  71. return config
  72. },
  73. (error: AxiosError) => {
  74. // Do something with request error
  75. console.log(error) // for debug
  76. return Promise.reject(error)
  77. }
  78. )
  79. // response 拦截器
  80. service.interceptors.response.use(
  81. async (response: AxiosResponse<any>) => {
  82. let { data } = response
  83. const config = response.config
  84. if (!data) {
  85. // 返回“[HTTP]请求没有返回值”;
  86. throw new Error()
  87. }
  88. const { t } = useI18n()
  89. // 未设置状态码则默认成功状态
  90. // 二进制数据则直接返回,例如说 Excel 导出
  91. if (
  92. response.request.responseType === 'blob' ||
  93. response.request.responseType === 'arraybuffer'
  94. ) {
  95. // 注意:如果导出的响应为 json,说明可能失败了,不直接返回进行下载
  96. if (response.data.type !== 'application/json') {
  97. return response.data
  98. }
  99. data = await new Response(response.data).json()
  100. }
  101. const code = data.code || result_code
  102. // 获取错误信息
  103. const msg = data.msg || errorCode[code] || errorCode['default']
  104. if (ignoreMsgs.indexOf(msg) !== -1) {
  105. // 如果是忽略的错误码,直接返回 msg 异常
  106. return Promise.reject(msg)
  107. } else if (code === 401) {
  108. // 如果未认证,并且未进行刷新令牌,说明可能是访问令牌过期了
  109. if (!isRefreshToken) {
  110. isRefreshToken = true
  111. // 1. 如果获取不到刷新令牌,则只能执行登出操作
  112. if (!getRefreshToken()) {
  113. return handleAuthorized()
  114. }
  115. // 2. 进行刷新访问令牌
  116. try {
  117. const refreshTokenRes = await refreshToken()
  118. // 2.1 刷新成功,则回放队列的请求 + 当前请求
  119. setToken((await refreshTokenRes).data.data)
  120. config.headers!.Authorization = 'Bearer ' + getAccessToken()
  121. requestList.forEach((cb: any) => {
  122. cb()
  123. })
  124. requestList = []
  125. return service(config)
  126. } catch (e) {
  127. // 为什么需要 catch 异常呢?刷新失败时,请求因为 Promise.reject 触发异常。
  128. // 2.2 刷新失败,只回放队列的请求
  129. requestList.forEach((cb: any) => {
  130. cb()
  131. })
  132. // 提示是否要登出。即不回放当前请求!不然会形成递归
  133. return handleAuthorized()
  134. } finally {
  135. requestList = []
  136. isRefreshToken = false
  137. }
  138. } else {
  139. // 添加到队列,等待刷新获取到新的令牌
  140. return new Promise((resolve) => {
  141. requestList.push(() => {
  142. config.headers!.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  143. resolve(service(config))
  144. })
  145. })
  146. }
  147. } else if (code === 500) {
  148. ElMessage.error(t('sys.api.errMsg500'))
  149. return Promise.reject(new Error(msg))
  150. } else if (code === 901) {
  151. ElMessage.error({
  152. offset: 300,
  153. dangerouslyUseHTMLString: true,
  154. message:
  155. '<div>' +
  156. t('sys.api.errMsg901') +
  157. '</div>' +
  158. '<div> &nbsp; </div>' +
  159. '<div>参考 https://doc.iocoder.cn/ 教程</div>' +
  160. '<div> &nbsp; </div>' +
  161. '<div>5 分钟搭建本地环境</div>'
  162. })
  163. return Promise.reject(new Error(msg))
  164. } else if (code !== 200) {
  165. if (msg === '无效的刷新令牌') {
  166. // hard coding:忽略这个提示,直接登出
  167. console.log(msg)
  168. return handleAuthorized()
  169. } else {
  170. ElNotification.error({ title: msg })
  171. }
  172. return Promise.reject('error')
  173. } else {
  174. // const lang = localeStore.getCurrentLocale.lang
  175. const requestUrl = response.config.url || ''
  176. // 判断是否包含rq/iot路径
  177. if (requestUrl.includes('rq/')||requestUrl.includes('system/dict')||requestUrl.includes('system/auth/get-permission-info')||requestUrl.includes('system/dept/list')
  178. ||requestUrl.includes('system/menu/simple-list')||requestUrl.includes('system/menu/list')||requestUrl.includes('system/dept/simple-list')
  179. ||requestUrl.includes('pms/')) {
  180. const localeStore = useLocaleStore()
  181. const lang = localeStore.getCurrentLocale.lang
  182. if (data&& data.data) {
  183. if (data.data.list) {
  184. if (Array.isArray(data.data.list)) {
  185. const list = langHelper.transformArray(data.data.list, lang)
  186. data.data.list = list;
  187. return data;
  188. }
  189. }else if (data &&Array.isArray(data.data)) {
  190. const list = langHelper.transformArray(data.data, lang)
  191. data.data = list;
  192. return data;
  193. }else if (data && typeof data.data === 'object') {
  194. const object = langHelper.transformObject(data, lang)
  195. data = object
  196. return data
  197. } else {
  198. return data
  199. }
  200. }
  201. }else {
  202. return data
  203. }
  204. // return data
  205. }
  206. },
  207. (error: AxiosError) => {
  208. console.log('err' + error) // for debug
  209. let { message } = error
  210. const { t } = useI18n()
  211. if (message === 'Network Error') {
  212. message = t('sys.api.errorMessage')
  213. } else if (message.includes('timeout')) {
  214. message = t('sys.api.apiTimeoutMessage')
  215. } else if (message.includes('Request failed with status code')) {
  216. message = t('sys.api.apiRequestFailed') + message.substr(message.length - 3)
  217. }
  218. ElMessage.error(message)
  219. return Promise.reject(error)
  220. }
  221. )
  222. const isSystemPagePath = (path: string): boolean=> {
  223. // 正则说明:
  224. // ^.*system/ 匹配开头任意字符直到system/
  225. // (?:[^/]+/)* 匹配零个或多个非斜杠字符组成的路径段
  226. // page(?:\?.*)?$ 匹配page结尾,可带查询参数
  227. const pattern = /^.*system\/(?:[^/]+\/)*page(?:\?.*)?$/i
  228. return pattern.test(path)
  229. }
  230. const refreshToken = async () => {
  231. axios.defaults.headers.common['tenant-id'] = getTenantId()
  232. return await axios.post(base_url + '/system/auth/refresh-token?refreshToken=' + getRefreshToken())
  233. }
  234. const handleAuthorized = () => {
  235. const { t } = useI18n()
  236. if (!isRelogin.show) {
  237. // 如果已经到登录页面则不进行弹窗提示
  238. if (window.location.href.includes('login')) {
  239. return
  240. }
  241. isRelogin.show = true
  242. ElMessageBox.confirm(t('sys.api.timeoutMessage'), t('common.confirmTitle'), {
  243. showCancelButton: false,
  244. closeOnClickModal: false,
  245. showClose: false,
  246. closeOnPressEscape: false,
  247. confirmButtonText: t('login.relogin'),
  248. type: 'warning'
  249. }).then(() => {
  250. resetRouter() // 重置静态路由表
  251. deleteUserCache() // 删除用户缓存
  252. removeToken()
  253. isRelogin.show = false
  254. // 干掉token后再走一次路由让它过router.beforeEach的校验
  255. window.location.href = window.location.href
  256. })
  257. }
  258. return Promise.reject(t('sys.api.timeoutMessage'))
  259. }
  260. export { service }