🎨 optimized code

This commit is contained in:
landaiqing
2024-11-27 01:50:18 +08:00
parent 88c1a4bd16
commit a3e15bbc86
13 changed files with 164 additions and 518 deletions

View File

@@ -1,76 +0,0 @@
import {defineStore} from 'pinia';
import {ref} from "vue";
// const expiresTime: number = 60 * 30; // 自定义过期时间 30 分钟
// const expiredStorage: Storage = getExpiredStorage(localStorage, expiresTime);
//
// function getExpiredStorage(storage: Storage, expiresTime: string | number | Date) {
// return {
// getItem(key: string) {
// const itemStr = storage.getItem(key);
// if (!itemStr) {
// return null;
// }
// // 读取的时候是字符串,需要转换为对象
// const item = JSON.parse(itemStr);
// const now: Date = new Date();
// if (now.getTime() > item.expiry) {
// storage.removeItem(key);
// return null;
// }
// // pinia 的持久化插件要求返回JSON字符串
// return JSON.stringify(item.value);
// },
// setItem(key: string, value: string) {
// const now = new Date();
// const item = {
// value: JSON.parse(value), // value是JSON字符串需要转换为对象
// expiry: now.getTime() + Number(expiresTime) * 1000,
// };
// storage.setItem(key, JSON.stringify(item)); // 存储又要转为JSON字符串
// },
// removeItem(key: string) {
// storage.removeItem(key);
// },
// clear() {
// Object.keys(storage).forEach((key: string) => {
// storage.removeItem(key);
// });
// },
// key(index: number): string | null {
// const keys = Object.keys(storage);
// return keys[index] || null;
// },
// length: Object.keys(storage).length,
// } as Storage;
// }
export const useClientStore = defineStore(
'clientId',
() => {
const clientId = ref<string>();
function setClientId(id: string) {
clientId.value = id;
}
function getClientId() {
return clientId.value;
}
return {
clientId,
setClientId,
getClientId
};
},
{
// 开启数据持久化
persist: {
key: 'clientId',
storage: localStorage,
pick: ["clientId"],
}
}
);

View File

@@ -1,6 +1,12 @@
import {defineStore} from 'pinia';
import {reactive} from 'vue';
import {generateClientId} from "@/api/client";
import {getGithubUrl} from "@/api/oauth/github.ts";
import {getQQUrl} from "@/api/oauth/qq.ts";
import {getGiteeUrl} from "@/api/oauth/gitee.ts";
import {getUserDevice} from "@/api/user";
import message from "@/components/MyUI/Message/Message.vue";
import {useI18n} from "vue-i18n";
export const useAuthStore = defineStore(
'user',
@@ -13,9 +19,127 @@ export const useAuthStore = defineStore(
avatar: '',
status: '',
});
const clientId = ref<string>('');
const githubRedirectUrl = ref<string>('');
const giteeRedirectUrl = ref<string>('');
const qqRedirectUrl = ref<string>('');
const router = useRouter();
const {t} = useI18n();
/**
* Get the redirect url of Github OAuth
*/
async function getGithubRedirectUrl() {
const res: any = await getGithubUrl(clientId.value);
if (res.code === 200 && res.data) {
githubRedirectUrl.value = res.data;
}
}
/**
* Get the redirect url of Gitee OAuth
*/
async function getGiteeRedirectUrl() {
const res: any = await getGiteeUrl();
if (res.code === 200 && res.data) {
giteeRedirectUrl.value = res.data;
}
}
/**
* Get the redirect url of QQ OAuth
*/
async function getQQRedirectUrl() {
const res: any = await getQQUrl(clientId.value);
if (res.code === 200 && res.data) {
qqRedirectUrl.value = res.data;
}
}
/**
* 获取client_id
*/
async function getClientId() {
const res: any = await generateClientId();
if (res.code === 200 && res.data) {
clientId.value = res.data;
}
}
/**
* 处理消息
* @param e
*/
const messageHandler = async (e: any) => {
if (typeof e.data === 'string') {
const res: any = JSON.parse(e.data);
if (res.code === 200 && res.data) {
user.uid = res.data.uid;
user.access_token = res.data.access_token;
user.username = res.data.username;
user.avatar = res.data.avatar;
user.nickname = res.data.nickname;
user.status = res.data.status;
await getUserDevice();
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
setTimeout(() => {
router.push('/main');
}, 1000);
} else {
message.error(t('login.loginError'));
window.removeEventListener("message", messageHandler);
}
}
};
function openGithubUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(githubRedirectUrl.value, 'newwindow', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
window.addEventListener("message", messageHandler);
}
/**
* Open the Gitee OAuth page in a new window
*/
function openGiteeUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(giteeRedirectUrl.value, '_blank', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
window.addEventListener("message", messageHandler);
}
function openQQUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(qqRedirectUrl.value, 'newwindow', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
window.addEventListener("message", messageHandler);
}
return {
user,
clientId,
getGithubRedirectUrl,
getGiteeRedirectUrl,
getQQRedirectUrl,
getClientId,
openGithubUrl,
openGiteeUrl,
openQQUrl,
};
},
{
@@ -23,7 +147,7 @@ export const useAuthStore = defineStore(
persist: {
key: 'user',
storage: localStorage,
pick: ['user'],
pick: ['user', "clientId", "githubRedirectUrl", "giteeRedirectUrl", "qqRedirectUrl"],
}
}
);