当前位置: 首页 > news >正文

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>
http://www.lryc.cn/news/261737.html

相关文章:

  • 环境搭建及源码运行_java环境搭建_mysql安装
  • Android camera的metadata
  • ElasticSearch面试题
  • C++ 数据结构知识点合集-C/C++ 数组允许定义可存储相同类型数据项的变量-供大家学习研究参考
  • 【机器学习】5分钟掌握机器学习算法线上部署方法
  • Vue3-21-组件-子组件给父组件发送事件
  • [密码学]AES
  • CentOS 7 部署pure-ftp
  • Vue2-动态组件案例
  • 【源码】车牌检测+QT界面+附带数据库
  • 实战1-python爬取安全客新闻
  • 光栅化渲染:可见性问题和深度缓冲区算法
  • docker入门小结
  • LLM Agent发展演进历史(观看metagpt视频笔记)
  • Linux(操作系统)面经——part2
  • Flink系列之:WITH clause
  • JMeter直连数据库
  • Linux部署MySQL5.7和8.0版本 | CentOS和Ubuntu系统详细步骤安装
  • STL中set和multiset容器的用法(轻松易懂~)
  • Codeforces Round 915 (Div. 2)
  • C语言经典错误总结(三)
  • Ubuntu系统入门指南:基础操作和使用
  • MyBatis原理解读
  • Linux---文本搜索命令
  • Unity中Shader语义的理解
  • Flink系列之:Top-N
  • CSS的三大特性(层叠性、继承性、优先级---------很重要)
  • 飞天使-docker知识点10-docker总结
  • 旅游管理虚拟情景实训教学系统演示
  • Linux Shell——输入输出命令详解