vite+ts——user.ts——ts接口定义+axios请求的写法

import axios from 'axios';
import qs from 'query-string';
import {UserState} from '@/store/modules/user/types';export interface LoginData{username:string;password:string;grant_type?:string;scope?:string;client_id?:string;client_secret?:string;response_type?:string;
}
export interface LoginRes{access_token:string;
}
export function login(data:LoginData){const q:LoginData = {...data,}const param = qs.stringify(q);return axios.post<LoginRes>('/connect/token',param,{headers:{'Content-Type':'application/x-www-form-urlencoded',},baseURL:import.meta.env.VITE_APP_IDS4_BASE_URL,})
}
export function logout(){return axios.delete<LoginRes>('/sys-auth/oauth/exit');
}
export function GlLogin(){const param = qs.stringify({grant_type:'client_credentials',client_id:'xafasdfa',client_secret:'adsfa',})return axios.post('/bimserver/auth/oauth/token',param,{headers:{'Content-Type':'application/x-www-form-urlencoded','isNeedToken':'false',},baseURL:'/gl_api'})
}
export function getUserInfo(userName:string){return axios.get<UserState>('/cde-collaboration/user/userInfo',{params:{userName,}})
}
export interface UserParams{ids?:string;names?:string;
}
export function getUserList(params:UserParams){return axios.get('/cde-collaboration/user/getUsers',{params,})
}
export function searchUser(searchValue:string,projectId:string|undefined = undefined
){return axios.get('/cde-collaboration/user/search',{params:{searchValue,projectId}})
}
export function getSms(phone:string){return axios.get<string>('/sys-user/user/sms_captcha',{params:{phone}})
}
export function setUserPwd(id:string,pwd:string){return axios.get<string>('/cde-collaboration/user/active',{params:{id,pwd}})
}
export interface PasswordParams{captcha:string;key:string;phone:string;pwd:string;
}
export function editPassword(data:PasswordParams){return axios.put('/sys-user/user/password',data)
}
export interface PwdParams{oldPwd:string;newPwd:string;enterPwd?:string;
}
export function modifyPassword(data；PwdParams){return axios.put('/sys-user/user/pwd',data)
}
export interface PhoneParams{phone:string;captcha:string;key?:string;
}
export function updataPhone(data:PhoneParams){return axios.post('/cde-collaboration/user/changePhone',data)
}
export function getPhoneCode(phone:string){return axios.get('/sys-user/user/sms_change_phone_captcha',{params:{phone,}})
}
export interface EmailParams{username?:string;id?:string;email:string;
}
export function updateEmail(data:EmailParams){return axios.post('/cde-collaboration/user/update',data)
}
export function getThird(key:string){return axios.get(`/sys-auth/oauth/render_user/${key}`)
}
export function getSocialInfoByToken(token:string){return axios.get('/sys-auth/oauth/user_info',{headers:{Authorization:`bearer ${token}`}})
}

UserState——@/store/modules/user/types

const interface RemoteDataCommon {createBy?: string;createDate?: string;updateBy?: string;updateDate?: string;deleteFlag?: number;
}
export type RoleType = '' | '*' | 'admin' | 'user';
// 0超级管理员 1项目创建员 -1普通成员
export type AdminType = 0 | 1 | -1;export interface UserState extends RemoteDataCommon {userId?: string;id?: string;username?: string;name?: string;phone?: string;email?: string;accountState?: number;avatarToken?: string;fid?: number;admin: AdminType;role: RoleType;color?: string;
}

login接口的调用

<template><a-form ref="loginForm" :model="userInfo" class="login-form" layout="vertical" @submit="handleSubmit"><a-form-item field="username" :rules="[{required:true,message:$t('login.form.userName.errMsg')}]":validate-trigger="['change','blur']" hide-label><a-input v-model="userInfo.username" :placeholder="$t('login.form.userName.placeholder')"><template #prefix><icon-user /></template></a-input></a-form-item><a-form-item field="password" :rules="[{required:true,message:$t('login.form.password.errMsg')}]":validate-trigger="['change','blur']"hide-label><a-input-password v-model="userInfo.password" :placeholder="$t('login.form.password.placeholder')" allow-clear><template #prefix><icon-lock /></template></a-input-password></a-form-item><a-space :size="16" direction="vertical"><div class="login-form-password-acitions"><a-checkbox checked="rememberPassword" :model=value="loginConfig.rememberPassword" @change="setRememberPassword as any'>{{$t('login.form.rememberPassword')}}</a-checkbox><a-link @click="changeLogin(LoginMethods.forget)">{{$t('login.form.forgetPassword')}}</a-link></div><a-button type="primary" html-type="submit" long :loading="loading">{{$t('login.form.login')}}</a-button></a-space></a-form>
</template>

<script setup lang="ts">
import {reactive} from 'vue';
import {useRouter} from 'vue-router';
import {Message} from '@arco-design/web-vue';
import {ValidatedError} from '@arco-design/web-vue/es/form/interface';
import {useI18n} from 'vue-i18n';
import {useUserStore} from '@vueuse/core';
import useLoading from '@/hooks/loading';
import type {LoginData} from '@/api/user';
import pwdEncrypt from '@/utils/encryption/pwd';
import {dotToSlash} from '@/utils/index';
import LoginMethods from '../constant';
const emit = defineEmits(['changeLogin']);
const changeLogin = (method:LoginMethods)=>{emit('chageLogin',method);
}
const router = useRouter();
const {t} = useI18n();
const {loading,setLoading} = useLoading();
const userStore = useUserStore();
const loginConfig = useStorage('login-config',{rememberPassword:true,username:'',password:''
})
const userInfo = reactive({username:loginConfig.value.username,password:loginConfig.value.password
})
const handleSubmit = async({errors,values,
}:{errors:Record<string,ValidatedError>|undefined;values:Record<string,any>;
})=>{if(loading.value) return;if(!errors){setLoading(true);try{const {username,password} = values;const data = {username,password:pwdEncrypt(password),grant_type:'password'}await userStore.login(data as LoginData).then(()=>{userStore.glLogin();})const {redirect,...othersQuery} = router.currentRoute.value.query;router.push({path;dotToSlash(redirect as string)||'/dashboard',query:{...othersQuery}})Message.success(t('login.form.login.success'));const {rememberPassword} = loginConfig.value;loginConfig.value.username = rememberPassword?username:'';loginConfig.value.password = rememberPassword?password:'';}catch(err:any){if(err?.reponse?.status === 400){Message.error(err.response.data);}else if(typeof err === 'string'){Message.error(err);}}finllay{setLoading(false);}}
}
const setRememberPassword = (value:boolean)=>{loginConfig.value.rememberPassword = value;
}
</script>
<script lang="ts">
export default{name:'AccountForm'
}
</script>