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>

相关推荐

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

    2023-12-12 10:48:01       45 阅读
  2. 封装全局axios请求

    2023-12-12 10:48:01       38 阅读
  3. uniapp+axios请求封装

    2023-12-12 10:48:01       34 阅读
  4. Vue2:请求接口两种方式axios和vue-resource

    2023-12-12 10:48:01       60 阅读
  5. 离开A页面时,取消A页面axios接口数据请求

    2023-12-12 10:48:01       31 阅读
  6. Vue路由切换 & Axios接口取消重复请求

    2023-12-12 10:48:01       49 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-12 10:48:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-12 10:48:01       106 阅读
  3. 在Django里面运行非项目文件

    2023-12-12 10:48:01       87 阅读
  4. Python语言-面向对象

    2023-12-12 10:48:01       97 阅读

热门阅读

  1. C# UDP

    C# UDP

    2023-12-12 10:48:01      54 阅读
  2. websocket和SSE通信示例(无需安装任何插件)

    2023-12-12 10:48:01       61 阅读
  3. WebSocket

    WebSocket

    2023-12-12 10:48:01      44 阅读
  4. css去掉input,textarea默认样式,自定义样式

    2023-12-12 10:48:01       64 阅读
  5. 生成正态分布数据的C语言实现

    2023-12-12 10:48:01       55 阅读
  6. 【React】useCallback 使用的说明

    2023-12-12 10:48:01       63 阅读
  7. Excel:对比两列是否有重复值

    2023-12-12 10:48:01       52 阅读
  8. docker 基础入门

    2023-12-12 10:48:01       55 阅读
  9. 机器学习---垃圾邮件分类案例

    2023-12-12 10:48:01       58 阅读
  10. DW1000通信模块的开发与应用

    2023-12-12 10:48:01       58 阅读