refactor(api): 重构网络请求模块以及完善 vuex 模块示例

Author: 白唯

@types/index.d.ts

@@ -1,8 +1,13 @@
 import { AppStateType } from '@/store/modules/app/state'
 import { ConsoleStateType } from '@/store/modules/console/state'
+import { UserStateType } from '@/store/modules/user/state'
 
 // vuex模块的类型
-type ModuleType = { app: AppStateType; console: ConsoleStateType }
+type ModuleType = {
+  app: AppStateType
+  console: ConsoleStateType
+  user: UserStateType
+}
 
 // 所有的StateType
 export type StateType = ModuleType
@@ -30,8 +35,111 @@ export type IconType = 'icon' | 'iconfont'
 export type ModalOpenMode = 'edit' | 'add' | 'other'
 
 export interface BasicUserType {
+  id: number
+  name?: string
+  avatar?: string
+  role?: string
+  department?: string
+  code?: string
+  createTime?: string
+  description?: string
+  email?: string
+  lastLoginTime?: string
+  modifyTime?: string
+  modifyUser?: number
+  nickName?: string
+  phone?: string
+  roleId?: number
+  roleName?: string
+  status?: number
+  tenantId?: number
+  type?: string
+  userId?: number
+  username?: string
+}
+
+export interface ListParamType {
+  id: number
+  pageSize: number
+  pageNum: number
+}
+
+// 接口响应通过格式
+export interface HttpResponse {
+  status: number
+  statusText: string
+  data: {
+    code: number
+    desc: string
+    [key: string]: any
+  }
+}
+
+// 接口请求列表通用参数配置
+export interface HttpListQuery {
+  pageNum?: number
+  pageSize?: number
+  orderNum?: number
+  [key: string]: any
+}
+
+// 团队列表类型
+export interface TeamListType {
+  createTime?: string
+  description?: string
+  id?: number
+  memberNum?: number
+  name?: string
+  orderNum?: number
+  projectNum?: number
+  tenantId?: number
+}
+
+// 批量添加团队成员列表
+export interface TeamMemberType {
+  id?: number
+  roleId?: number // 0 成员 1管理员 2 访客
+  status?: number
+  teamId?: number
+  tenantId?: number
+  toolRole?: string
+  userId?: number
+  userTenantId?: number
+}
+
+export enum RoleType {
+  '超级管理员' = 1,
+  '子账号',
+  '团队管理员',
+  '团队成员',
+  '团队访客',
+  '项目管理员',
+  '项目成员',
+  '项目访客'
+}
+
+// 权限列表类型
+export interface RoleItemType {
+  createTime: string
+  id: number
+  roleId: number
+  modifyTime: string
+  parentId: number
+  remark: string
+  roleName: keyof RoleType
+  type: number
+  menuIds: string
+}
+
+export interface AddTeamGroupParams {
+  description?: string
+  id?: number
   name: string
-  avatar: unknown
-  role: string
-  department: string
+  tenantId: number
+}
+
+export interface AddTeamGroupMemberParams {
+  groupId: number
+  id?: number
+  userId: number
 }

src/api/apiList.ts

@@ -1,4 +1,7 @@
 import Axios, { AxiosResponse, AxiosRequestConfig, AxiosError } from 'axios'
+import router from '@/router'
+import { message } from 'ant-design-vue'
+import Store from '@/store'
 
 /**
  * get status code
@@ -57,30 +60,50 @@ const getErrorCode2text = (response: AxiosResponse): string => {
  */
 const service = Axios.create({
   baseURL: process.env.VUE_APP_BASE_URL,
-  timeout: 10000
+  timeout: 10000,
+  headers: {
+    'User-Type': 'bus'
+  }
 })
 
 /**
  * @description 请求发起前的拦截器
  * @returns {AxiosRequestConfig} config
  */
-service.interceptors.request.use(
-  async <AxiosRequestConfig>(config: AxiosRequestConfig) => {
-    // check network
-    /* TODO add http headers
-   const token = window.localStorage.getItem('token')
-   config.headers = {
-    ...config.headers,
-    Authorization: token
-  } */
+service.interceptors.request.use(async (config: AxiosRequestConfig) => {
+  // 如果是获取token接口：
+  if (config.url === '/auth/oauth/token') {
+    let userAccount = ''
+    // 若存在username，则为登录情况，判断user-account
+    if (config.params.username) {
+      userAccount = config.params.username.includes('-')
+        ? 'ACCOUNT_USER'
+        : 'ADMIN_USER'
+    } else {
+      // 刷新token情况，通过用户信息email是否有值判断
+      userAccount = Store.state.user.userDetail.email
+        ? 'ADMIN_USER'
+        : 'ACCOUNT_USER'
+    }
 
-    return config
+    config.headers['User-Account'] = userAccount
+    config.headers.Authorization = 'Basic ZmViczoxMjM0NTY='
+  } else {
+    // 如果保存有token，则取，否则不添加Authorization
+    if (localStorage.vuex && JSON.parse(localStorage.vuex).user?.token) {
+      const token = Store.state.user?.token
+      const tokenType = token.token_type
+      const accessToken = token.access_token
+      config.headers.Authorization = `${tokenType} ${accessToken}`
+    }
   }
-)
+
+  return config
+})
 
 /**
- * @description 请求发起前的拦截器
- * @returns {} config
+ * @description 响应收到后的拦截器
+ * @returns {}
  */
 service.interceptors.response.use(
   /** 请求有响应 */
@@ -101,14 +124,20 @@ service.interceptors.response.use(
     }
 
     if (error.response) {
-      __emsg = error.response.data.msg
+      __emsg = error.response.data.message
+        ? error.response.data.message
+        : error.response.data.data
     }
     // timeout
     if (__emsg.indexOf('timeout') >= 0) {
       __emsg = 'timeout'
     }
 
-    if (error?.response?.data?.code === 401) {
+    if (error?.response?.status === 401) {
+      if (router.currentRoute.value.path !== '/entry/login') {
+        message.info('登录凭证已过期，请重新登录')
+        router.push('/entry/login')
+      }
       return Promise.reject(new Error('401'))
     }
     return Promise.reject(new Error(__emsg))

src/api/axios.ts

@@ -0,0 +1,17 @@
+import Axios from './axios'
+import { HttpResponse } from '../../@types/index'
+
+/**
+ * @description 公共模块的的网络请求，所有通用 api 放在此处
+ */
+
+class CommonService {
+  // 添加团队
+  static getRoleInfoList(): Promise<HttpResponse> {
+    return Axios.get('/bus/common/getRoleInfo', {
+      responseType: 'json'
+    })
+  }
+}
+
+export default CommonService