app.tsx 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. // 运行时配置
  2. import { RunTimeLayoutConfig, RequestConfig } from '@umijs/max';
  3. import { message } from 'antd';
  4. import UserDropdown from '@/components/UserDropdown';
  5. import { getToken } from '@/utils/utils';
  6. import { history } from 'umi';
  7. import logo from '@/assets/logo.png';
  8. import { useModel } from '@umijs/max';
  9. import { queryCurrentV2 } from './services/user';
  10. import dayjs from 'dayjs';
  11. import 'dayjs/locale/zh-cn';
  12. dayjs.locale('zh-cn');
  13. // 全局初始化数据配置,用于 Layout 用户信息和权限初始化
  14. // 更多信息见文档:https://umijs.org/docs/api/runtime-config#getinitialstate
  15. export async function getInitialState(): Promise<any> {
  16. const { data: user } = await queryCurrentV2();
  17. let permission = {};
  18. user.Permissions?.forEach((item: any) => {
  19. permission = {
  20. ...permission,
  21. ...item.Menus,
  22. };
  23. });
  24. return {
  25. user: {
  26. ...user,
  27. Permission: permission,
  28. },
  29. };
  30. }
  31. export const layout: RunTimeLayoutConfig = (initialState) => {
  32. return {
  33. navTheme: 'light',
  34. layout: 'mix',
  35. title: '',
  36. token: {
  37. header: {
  38. colorBgHeader: '#292f33',
  39. colorHeaderTitle: '#fff',
  40. colorTextMenu: '#dfdfdf',
  41. colorTextMenuSecondary: '#dfdfdf',
  42. colorTextMenuSelected: '#fff',
  43. colorBgMenuItemSelected: '#22272b',
  44. colorTextRightActionsItem: '#dfdfdf',
  45. },
  46. sider: {
  47. colorMenuBackground: '#fff',
  48. colorMenuItemDivider: '#dfdfdf',
  49. colorTextMenu: '#595959',
  50. colorTextMenuSelected: 'rgba(42,122,251,1)',
  51. colorBgMenuItemSelected: 'rgba(230,243,254,1)',
  52. },
  53. },
  54. // fixedHeader: true,
  55. // fixSiderbar: true,
  56. rightRender: () => <UserDropdown />,
  57. logo: logo,
  58. };
  59. };
  60. // axios配置
  61. export const request: RequestConfig = {
  62. errorConfig: {
  63. errorThrower(res: any) {
  64. // const { data, code, msg } = res;
  65. // if (code !== 200) {
  66. // const error: any = new Error(msg);
  67. // error.name = 'AjaxError';
  68. // error.info = { code, msg, data };
  69. // throw error;
  70. // }
  71. console.log('errorThrower', res);
  72. },
  73. errorHandler(error: any, opts: any) {
  74. if (opts?.skipErrorHandler) throw error;
  75. // errorThrower 抛出的错误。
  76. if (error.name === 'AjaxError') {
  77. // 校验是否token失效
  78. if (tokenExpiredHandle(error.info.code)) return;
  79. const errorInfo: any = error.info;
  80. if (errorInfo) {
  81. message.error(errorInfo.msg || errorInfo.data);
  82. return error.info;
  83. }
  84. } else if (error.response) {
  85. // http错误,校验token是否失效
  86. if (tokenExpiredHandle(error.response.status)) return;
  87. // 请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围
  88. message.error(`网络连接错误,请稍后重试(${error.response.status})`);
  89. } else if (error.request) {
  90. // 请求已经成功发起,但没有收到响应
  91. // \`error.request\` 在浏览器中是 XMLHttpRequest 的实例,
  92. // 而在node.js中是 http.ClientRequest 的实例
  93. message.error('网络连接错误,请稍后重试(服务器未返回数据)。');
  94. } else {
  95. // 发送请求时出了点问题
  96. message.error('网络连接错误,请稍后重试(请求发送失败)。');
  97. }
  98. },
  99. },
  100. requestInterceptors: [
  101. (config: any) => {
  102. if (!config.headers) config.headers = {};
  103. config.headers['JWT-TOKEN'] = getToken();
  104. return config;
  105. },
  106. ],
  107. responseInterceptors: [
  108. (res: any) => {
  109. const resData = res.data;
  110. const { code, msg, data } = resData;
  111. // if (code !== 200) {
  112. // let error: any = {};
  113. // error.name = 'AjaxError';
  114. // error.info = { code, msg, data };
  115. // // throw error;
  116. // return Promise.reject(error);
  117. // }
  118. return res;
  119. },
  120. ],
  121. };
  122. let tokenFlag: boolean = false;
  123. // token失效校验
  124. const tokenExpiredHandle = (code: number) => {
  125. if ([401, 601, 602, 603].includes(code)) {
  126. if (tokenFlag) return true;
  127. tokenFlag = true;
  128. setTimeout(() => {
  129. tokenFlag = false;
  130. }, 50000);
  131. message.error('token失效,请重新登录');
  132. history.push('/login');
  133. return true;
  134. } else {
  135. return false;
  136. }
  137. };