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.pswp.cn/news/215721.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/215721.shtml
英文地址,請注明出處:http://en.pswp.cn/news/215721.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

企業使用APP自動化測試工具的重要因素

隨著移動應用市場的蓬勃發展&#xff0c;企業對高質量、高效率的軟件交付提出了更高的要求。在這個背景下&#xff0c;APP自動化測試工具成為了企業不可或缺的一部分。以下是企業采用APP自動化測試工具的關鍵因素&#xff1a; 1. 快速且可重復的測試執行 自動化測試工具能夠快速…

Docker入門概念

文章目錄 容器&#xff08;container&#xff1a;容器/集裝箱&#xff09;技術虛擬機解決了哪些部署問題docker解決了哪些部署問題docker是如何做到容器間運行時環境隔離的docker基本概念docker基本使用 容器&#xff08;container&#xff1a;容器/集裝箱&#xff09;技術 容…

奧威亞視頻云平臺VideoCover.aspx 接口任意文件上傳漏洞復現 [附POC]

文章目錄 奧威亞視頻云平臺VideoCover.aspx 接口任意文件上傳漏洞復現 [附POC]0x01 前言0x02 漏洞描述0x03 影響版本0x04 漏洞環境0x05 漏洞復現1.訪問漏洞環境2.構造POC3.復現0x06 修復建議奧威亞視頻云平臺VideoCover.aspx 接口任意文件上傳漏洞復現 [附POC] 0x01 前言 免責…

做數據分析為何要學統計學(5)——什么問題適合使用卡方檢驗?

卡方檢驗作為一種非常著名的非參數檢驗方法&#xff08;不受總體分布因素的限制&#xff09;&#xff0c;在工程試驗、臨床試驗、社會調查等領域被廣泛應用。但是也正是因為使用的便捷性&#xff0c;造成時常被誤用。本文參閱相關的文獻&#xff0c;對卡方檢驗的適用性進行粗淺…

原來使用代碼也可以畫時序圖,用這個Mermaid就行,真香

本文首發于我的個人掘金博客&#xff0c;看到很多人都比較喜歡這篇文章&#xff0c;分享給大家。 個人博客主頁&#xff1a;https://www.aijavapro.cn 個人掘金主頁&#xff1a;juejin.cn/user/2359988032644541/posts 個人知識星球: 覺醒的新世界程序員 一、背景 在軟件開發和…

spring數據校驗

我是南城余&#xff01;阿里云開發者平臺專家博士證書獲得者&#xff01; 歡迎關注我的博客&#xff01;一同成長&#xff01; 一名從事運維開發的worker&#xff0c;記錄分享學習。 專注于AI&#xff0c;運維開發&#xff0c;windows Linux 系統領域的分享&#xff01; 本…

數據庫(一)| 數據庫概述、基本概念、關系型數據庫特點、超鍵候選碼等

文章目錄 1 數據庫的一些基礎概念1.1 數據庫和數據庫管理系統1.2 關系模式和關系實例1.3 數據庫模式和數據庫實例 2 數據庫組織形式2.1 數據采用文件的缺點2.2 使用數據庫管理系統的 優點 3 關系型數據庫特點4 三個層次的數據抽象Data Abstraction5 超鍵、候選碼、主碼、外碼 1…

php之jwt使用

PHP JWT&#xff08;JSON Web Token&#xff09;是一種用于身份驗證和授權的開放標準。JWT是一個包含有關用戶或實體身份信息的安全令牌&#xff0c;它由三部分組成&#xff1a;頭部&#xff08;Header&#xff09;、載荷&#xff08;Payload&#xff09;和簽名&#xff08;Sig…

計算機網絡編程

網絡編程 Java 是第一大編程語言和開發平臺。它有助于企業降低成本、縮短開發周期、推動創新以及改善應用服務。如今全球有數百萬開發人員運行著超過 51 億個 Java 虛擬機&#xff0c; Java 仍是企業和開發人員的首選開發平臺。 課程內容的介紹 1. 計算機網絡基礎 2. So…

數據結構基礎介紹

一.起源及重要性 1968 年&#xff0c;美國的高德納 Donakl E . Kn uth 教授在其所寫的《 計算機程序藝術》第一卷《基本算法 》 中&#xff0c;較系統地闡述了數據的邏輯結構和存儲結構及其操作&#xff0c; 開創了數據結構的課程體系 &#xff0c;數據結構作為一門獨立的…

B029-JDBC增強

目錄 PreparedStatement 查詢1.sql注入2.Statement分析 (面試題)3.PreparedStatement (面試題) 登錄功能的完善事務鏈接池概念實現DBCP連接池實現第一種配置方式第二種配置方式 返回主鍵BaseDao的抽取 PreparedStatement 查詢 1.sql注入 就是在sql的字符串拼接的時候&#xf…

基于單片機的定時插座在智能家居中的應用

近年來&#xff0c;隨著科學技術的發展迅速&#xff0c;人們對智能化的要求越來越高。越來越多的智能化產品進入千家萬戶&#xff0c;如電腦電視、掃地機器人、智能空氣凈化器等。這些家居電器和電子產品大都需要連接電源&#xff0c;為滿足多種用電器的正常使用&#xff0c;延…

DevEco Studio 生成HPK文件

DevEco Studio 生成HPK文件 一、安裝環境 操作系統: Windows 10 專業版 IDE:DevEco Studio 3.1 SDK:HarmonyOS 3.1 二、生成HPK文件 生成的HPK文件存放在entry文件夾下。下圖是未生成HPK的樣式。 生成HPK&#xff1a;菜單Build->Build Hap(s)/APP(s)->Build Hap(s)…

啟動jar包命令

一、Windows環境 找到jar包的位置&#xff1b; 按shift鍵&#xff0c;點擊鼠標右鍵&#xff0c;選中在此處打開PowerShell窗口&#xff1b; 此時進入命令行工具 輸入java -jar .\java_web-0.0.1-SNAPSHOT.jar&#xff08;注意空格&#xff09;。 二、Linux環境 2.1 方式一 …

039.Python面向對象_三大特性綜合案例2

我 的 個 人 主 頁&#xff1a;&#x1f449;&#x1f449; 失心瘋的個人主頁 &#x1f448;&#x1f448; 入 門 教 程 推 薦 &#xff1a;&#x1f449;&#x1f449; Python零基礎入門教程合集 &#x1f448;&#x1f448; 虛 擬 環 境 搭 建 &#xff1a;&#x1f449;&…

一、微前端目標、前端架構的前生今世、微前端架構優勢和劣勢、軟件設計原則與分層

1、目標 2、前端架構的前世今生 ① 初始&#xff1a;無架構&#xff0c;前端代碼內嵌到后端應用中 ② 后端 MVC 架構&#xff1a;將視圖層、數據層、控制層做分離 缺點&#xff1a;重度依賴開發環境&#xff0c;代碼混淆嚴重&#xff08;在調試時&#xff0c;需要啟動后端所有…

小型洗衣機哪個牌子質量好?迷你洗衣機排名前十名

隨著內衣洗衣機的流行&#xff0c;很多小伙伴在糾結該不該入手一款內衣洗衣機&#xff0c;專門來洗一些貼身衣物&#xff0c;答案是非常有必要的&#xff0c;因為我們現在市面上的大型洗衣機只能做清潔&#xff0c;無法對我們的貼身衣物進行一個高強度的清潔&#xff0c;而小小…

【CCF BDCI 2023】多模態多方對話場景下的發言人識別 Baseline 0.71 NLP 部分

【CCF BDCI 2023】多模態多方對話場景下的發言人識別 Baseline 0.71 NLP 部分 概述NLP 簡介文本處理詞嵌入上下文理解 文本數據加載to_device 函數構造數據加載樣本數量 len獲取樣本 getitem 分詞構造函數調用函數輪次嵌入 RobertaRoberta 創新點NSP (Next Sentence Prediction…

23種設計模式之裝飾者模式(被裝飾者,接口層,裝飾抽象層,具體裝飾者)

23種設計模式之裝飾者模式 文章目錄 23種設計模式之裝飾者模式設計思想裝飾者模式的優點裝飾者模式的缺點裝飾者模式的優化方法UML 解析預設場景 代碼釋義總結 設計思想 原文:裝飾器模式&#xff08;Decorator Pattern&#xff09;允許向一個現有的對象添加新的功能&#xff0…

應用在LED燈光控制觸摸屏中的觸摸芯片

LED燈光控制觸摸屏方法&#xff0c;包括&#xff1a;建立觸摸屏的觸摸軌跡信息與LED燈光驅動程序的映射關系&#xff1b;檢測用戶施加在觸摸屏上的觸摸軌跡&#xff0c;生成觸摸軌跡信息&#xff1b;根據生成的觸摸軌跡信息&#xff0c;調用對應的LED燈光驅動程序&#xff0c;控…