vue3--第三方登陆代码

<template>	
<el-form ref="FormRef" :model="loginForm" :rules="loginRules">

<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="用户名：admin / user">
<template #prefix>
<el-icon class="el-input__icon"><user /></el-icon>
</template>
</el-input></el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" placeholder="密码：123456" show-password autocomplete="new-password">
<template #prefix>
<el-icon class="el-input__icon"><lock /></el-icon>
</template>
</el-input></el-form-item>
</el-form>
	

<el-button :icon="CircleClose" round @click="resetForm(FormRef)" size="large">重置</el-button>
<div class="login-btn">		
<a :href="feishuUrl" class="el-button el-button--primary"> <i class="UserFilled"></i>飞书登录 </a>			
</div>

</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Login } from "@/api/Login ";
import { CircleClose, UserFilled } from "@element-plus/icons-vue";
import type { ElForm } from "element-plus";
import { ElMessage } from "element-plus";
import { loginApi } from "@/api/modules/login";
import { GbStore } from "@/store";
import { MenuStore } from "@/store/modules/menus";
import { TabsStore } from "@/store/modules/tabs";
import md5 from "js-md5";


const globalStore = GbStore ();
const menuStore = MenuStore();
const tabStore = TabsStore();// 定义 formRef（校验规则）type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>();
const loginRules = reactive({	
username: [{ required: true, message: "请输入用户名", trigger: "blur" }],	
password: [{ required: true, message: "请输入密码", trigger: "blur" }]});


const loginForm = reactive<Login.ReqLoginForm>({	username: "",	password: ""});
const redirectUri = window.location.origin + "/login";
const loading = ref<boolean>(false);const feishuUrl = ref<string>(	`https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=${cli_a6bfedf23fbcd88d"}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code`);

const router = useRouter();
const login = async (code: string) => {	loading.value = true;	
globalStore.setToken("");
globalStore.setOrganizationCode("");
globalStore.setFunctionGroup("");
globalStore.setUserInfo("");

try {
const requestLoginForm: any = {	
entrance: "PC",
loginType: "FEISHU",
redirectUri,
code,systemCode: "developerConsole",
clientId: "4f8e1f28-2356-4の24-8479-fd45790dc35a"
};

const res = await loginApi(requestLoginForm);	globalStore.setToken(res.data!.access_token);
menuStore.setMenuList([]);
tabStore.closeMultipleTab();
ElMessage.success("登录成功！");	
router.push({ name: "home" });	
} finally {
loading.value = false;	}};

onMounted(() => {	let code: string = window.location.href.match(/\=(.*?)\#/) ? (window.location.href.match(/\=(.*?)\#/) as any)[1] : "";	

if (code) {		
window.location.href = window.location.origin + "/login?code=" + code;	
} else if (router.currentRoute.value.query.code) {

let code1: any = router.currentRoute.value.query.code;
login(code1);
}



</script>