From 462818ff9d93ea1d56df10264fb0da962464952a Mon Sep 17 00:00:00 2001
From: landaiqing <3517283258@qq.com>
Date: Tue, 5 Nov 2024 17:27:05 +0800
Subject: [PATCH] :art: update login logic
---
src/api/comment/index.ts | 8 +--
src/api/user/index.ts | 13 ++--
.../src/CommentInput/CommentInput.vue | 7 +--
.../src/CommentList/CommentList.vue | 6 +-
.../src/ReplyInput/ReplyInput.vue | 6 +-
.../CommentReply/src/ReplyList/ReplyList.vue | 4 --
.../src/ReplyReplyInput/ReplyReply.vue | 5 +-
.../src/UserInfoCard/UserInfoCard.vue | 2 +-
.../CommentReply/src/UserInfoCard/index.scss | 1 +
src/components/MyUI/Popover/Popover.vue | 4 ++
src/layout/default/Header/Header.vue | 2 +-
src/store/modules/commentStore.ts | 4 --
src/store/modules/userStore.ts | 18 ++----
src/utils/alova/service.ts | 11 ++--
src/views/Login/LoginFooter.vue | 59 +++++++++----------
src/views/Login/LoginPage.vue | 27 ++++-----
src/views/Main/MainPage.vue | 2 +-
src/views/QRLogin/QRLogin.vue | 36 +++++------
src/views/QRLogin/QRLoginFooter.vue | 59 +++++++++----------
19 files changed, 117 insertions(+), 157 deletions(-)
diff --git a/src/api/comment/index.ts b/src/api/comment/index.ts
index 9c8c5df..e855d40 100644
--- a/src/api/comment/index.ts
+++ b/src/api/comment/index.ts
@@ -6,7 +6,6 @@ import {service} from "@/utils/alova/service.ts";
*/
export const commentSubmitApi = (params: any) => {
return service.Post('/api/auth/comment/submit', {
- user_id: params.user_id,
content: params.content,
images: params.images,
topic_id: params.topic_id,
@@ -28,7 +27,6 @@ export const commentSubmitApi = (params: any) => {
*/
export const replySubmitApi = (params: any) => {
return service.Post('/api/auth/reply/submit', {
- user_id: params.user_id,
content: params.content,
images: params.images,
topic_id: params.topic_id,
@@ -56,7 +54,6 @@ export const commentListApi = (params: any) => {
page: params.page,
size: params.size,
topic_id: params.topic_id,
- user_id: params.user_id,
is_hot: params.is_hot,
},
{
@@ -81,7 +78,6 @@ export const replyListApi = (params: any) => {
size: params.size,
comment_id: params.comment_id,
topic_id: params.topic_id,
- user_id: params.user_id,
},
{
cacheFor: {
@@ -102,7 +98,6 @@ export const replyListApi = (params: any) => {
*/
export const replyReplySubmitApi = (params: any) => {
return service.Post('/api/auth/reply/reply/submit', {
- user_id: params.user_id,
content: params.content,
images: params.images,
topic_id: params.topic_id,
@@ -128,7 +123,6 @@ export const replyReplySubmitApi = (params: any) => {
*/
export const commentLikeApi = (params: any) => {
return service.Post('/api/auth/comment/like', {
- user_id: params.user_id,
comment_id: params.comment_id,
topic_id: params.topic_id,
},
@@ -146,7 +140,7 @@ export const commentLikeApi = (params: any) => {
*/
export const cancelCommentLikeApi = (params: any) => {
return service.Post('/api/auth/comment/cancel_like', {
- user_id: params.user_id,
+
comment_id: params.comment_id,
topic_id: params.topic_id,
},
diff --git a/src/api/user/index.ts b/src/api/user/index.ts
index 980ae93..1c26dfa 100644
--- a/src/api/user/index.ts
+++ b/src/api/user/index.ts
@@ -21,12 +21,9 @@ export const getUserInfo = () => {
};
/**
* 刷新token
- * @param refreshToken
*/
-export const refreshToken = (refreshToken: string) => {
- return service.Post('/api/token/refresh', {
- refresh_token: refreshToken
- }, {
+export const refreshToken = () => {
+ return service.Post('/api/token/refresh', {}, {
meta: {
authRole: 'refreshToken',
ignoreToken: false
@@ -126,12 +123,10 @@ export const getUserPermissions = (user_id: string) => {
/**
* 获取用户设备信息
*/
-export const getUserDevice = (userId: string) => {
+export const getUserDevice = () => {
return service.Get('/api/user/get_device',
{
- params: {
- user_id: userId,
- },
+ params: {},
meta: {
ignoreToken: true,
}
diff --git a/src/components/CommentReply/src/CommentInput/CommentInput.vue b/src/components/CommentReply/src/CommentInput/CommentInput.vue
index a8f45bb..2581333 100644
--- a/src/components/CommentReply/src/CommentInput/CommentInput.vue
+++ b/src/components/CommentReply/src/CommentInput/CommentInput.vue
@@ -2,7 +2,7 @@
-
+
diff --git a/src/components/CommentReply/src/UserInfoCard/index.scss b/src/components/CommentReply/src/UserInfoCard/index.scss
index 2b9e270..846f760 100644
--- a/src/components/CommentReply/src/UserInfoCard/index.scss
+++ b/src/components/CommentReply/src/UserInfoCard/index.scss
@@ -15,6 +15,7 @@
margin-left: 10px;
.user-info-card-name-text {
+ color: var(--text-color);
font-size: 15px;
font-weight: 600;
}
diff --git a/src/components/MyUI/Popover/Popover.vue b/src/components/MyUI/Popover/Popover.vue
index c3029c5..59d9575 100644
--- a/src/components/MyUI/Popover/Popover.vue
+++ b/src/components/MyUI/Popover/Popover.vue
@@ -40,6 +40,10 @@ const showContent = computed(() => {
borderRadius: '8px',
textAlign: 'start',
transform: `translate(${props.offsetX}px, 0)`,
+ backgroundColor: 'var(--background-color)',
+ color: 'var(--text-color)',
+ border: '1px solid var(--text-color)',
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
...tooltipStyle
}"
:transition-duration="200"
diff --git a/src/layout/default/Header/Header.vue b/src/layout/default/Header/Header.vue
index b038f8e..de47ce9 100644
--- a/src/layout/default/Header/Header.vue
+++ b/src/layout/default/Header/Header.vue
@@ -26,7 +26,7 @@
diff --git a/src/store/modules/commentStore.ts b/src/store/modules/commentStore.ts
index a66052e..6df5c88 100644
--- a/src/store/modules/commentStore.ts
+++ b/src/store/modules/commentStore.ts
@@ -43,7 +43,6 @@ export const useCommentStore = defineStore(
*/
async function getCommentList(params: any) {
const data: any = {
- user_id: params.user_id,
topic_id: params.topic_id,
page: params.page,
size: params.size,
@@ -94,7 +93,6 @@ export const useCommentStore = defineStore(
page: data.page,
size: data.size,
comment_id: data.comment_id,
- user_id: data.user_id,
};
replyLoading.value = true;
replyList.value = {} as Comment;
@@ -115,7 +113,6 @@ export const useCommentStore = defineStore(
async function commentLike(data: any): Promise {
const params: any = {
comment_id: data.comment_id,
- user_id: data.user_id,
topic_id: data.topic_id,
};
const result: any = await commentLikeApi(params);
@@ -133,7 +130,6 @@ export const useCommentStore = defineStore(
async function cancelCommentLike(data: any): Promise {
const params: any = {
comment_id: data.comment_id,
- user_id: data.user_id,
topic_id: data.topic_id,
};
const result: any = await cancelCommentLikeApi(params);
diff --git a/src/store/modules/userStore.ts b/src/store/modules/userStore.ts
index 5cba0cb..21599d8 100644
--- a/src/store/modules/userStore.ts
+++ b/src/store/modules/userStore.ts
@@ -6,20 +6,12 @@ export const useAuthStore = defineStore(
'user',
() => {
const user: any = reactive({
- accessToken: '',
+ access_token: '',
uid: '',
- refreshToken: '',
- expiresAt: 0,
- userInfo: {
- username: '',
- nickname: '',
- email: '',
- phone: '',
- avatar: '',
- gender: '',
- status: '',
- created_at: '',
- },
+ username: '',
+ nickname: '',
+ avatar: '',
+ status: '',
});
return {
diff --git a/src/utils/alova/service.ts b/src/utils/alova/service.ts
index 3f2f499..4b1bd75 100644
--- a/src/utils/alova/service.ts
+++ b/src/utils/alova/service.ts
@@ -26,12 +26,9 @@ const {onAuthRequired, onResponseRefreshToken} = createServerTokenAuthentication
handler: async () => {
// 刷新token
const user = useStore().user;
- const res: any = await refreshToken(user.user?.refreshToken);
+ const res: any = await refreshToken();
if (res.code === 200 && res.data) {
- const {access_token, refresh_token, uid} = res.data;
- user.user.accessToken = access_token;
- user.user.refreshToken = refresh_token;
- user.user.uid = uid;
+ user.user.access_token = res.data;
}
}
}
@@ -49,7 +46,7 @@ export const service = createAlova({
beforeRequest: onAuthRequired(async (method: any) => {
if (!method.meta?.ignoreToken) {
const user = useStore().user;
- method.config.headers.Authorization = `${import.meta.env.VITE_APP_TOKEN_KEY} ${user.user.accessToken}`;
+ method.config.headers.Authorization = `${import.meta.env.VITE_APP_TOKEN_KEY} ${user.user.access_token}`;
}
const lang = useStore().lang;
method.config.headers['Accept-Language'] = lang.lang || 'zh';
@@ -78,7 +75,7 @@ export const service = createAlova({
onOk() {
setTimeout(() => {
window.location.href = '/login';
- },2000);
+ }, 1000);
},
// onCancel() {
// setTimeout(() => {
diff --git a/src/views/Login/LoginFooter.vue b/src/views/Login/LoginFooter.vue
index 647b6d7..85f9012 100644
--- a/src/views/Login/LoginFooter.vue
+++ b/src/views/Login/LoginFooter.vue
@@ -38,7 +38,7 @@ const githubRedirectUrl = ref('');
const giteeRedirectUrl = ref('');
const qqRedirectUrl = ref('');
const client = useStore().client;
-
+const userStore = useStore().user;
/**
* Get the redirect url of Github OAuth
*/
@@ -97,16 +97,15 @@ function openGithubUrl() {
const messageHandler = async (e: any) => {
if (typeof e.data === 'string') {
- const data: any = JSON.parse(e.data);
- if (data.code === 200 && data.data) {
- const user = useStore().user;
- const {access_token, refresh_token, uid, expires_at, user_info} = data.data;
- user.user.accessToken = access_token;
- user.user.refreshToken = refresh_token;
- user.user.uid = uid;
- user.user.expiresAt = expires_at;
- user.user.userInfo = user_info;
- await getUserDevice(uid);
+ const res: any = JSON.parse(e.data);
+ if (res.code === 200 && res.data) {
+ userStore.user.uid = res.data.uid;
+ userStore.user.access_token = res.data.access_token;
+ userStore.user.username = res.data.username;
+ userStore.user.avatar = res.data.avatar;
+ userStore.user.nickname = res.data.nickname;
+ userStore.user.status = res.data.status;
+ await getUserDevice();
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
setTimeout(() => {
@@ -141,16 +140,15 @@ function openGiteeUrl() {
const messageHandler = async (e: any) => {
if (typeof e.data === 'string') {
- const data: any = JSON.parse(e.data);
- if (data.code === 200 && data.data) {
- const user = useStore().user;
- const {access_token, refresh_token, uid, expires_at, user_info} = data.data;
- user.user.accessToken = access_token;
- user.user.refreshToken = refresh_token;
- user.user.uid = uid;
- user.user.expiresAt = expires_at;
- user.user.userInfo = user_info;
- await getUserDevice(uid);
+ const res: any = JSON.parse(e.data);
+ if (res.code === 200 && res.data) {
+ userStore.user.uid = res.data.uid;
+ userStore.user.access_token = res.data.access_token;
+ userStore.user.username = res.data.username;
+ userStore.user.avatar = res.data.avatar;
+ userStore.user.nickname = res.data.nickname;
+ userStore.user.status = res.data.status;
+ await getUserDevice();
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
setTimeout(() => {
@@ -183,16 +181,15 @@ function openQQUrl() {
const messageHandler = async (e: any) => {
if (typeof e.data === 'string') {
- const data: any = JSON.parse(e.data);
- if (data.code === 200 && data.data) {
- const user = useStore().user;
- const {access_token, refresh_token, uid, expires_at, user_info} = data.data;
- user.user.accessToken = access_token;
- user.user.refreshToken = refresh_token;
- user.user.uid = uid;
- user.user.expiresAt = expires_at;
- user.user.userInfo = user_info;
- await getUserDevice(uid);
+ const res: any = JSON.parse(e.data);
+ if (res.code === 200 && res.data) {
+ userStore.user.uid = res.data.uid;
+ userStore.user.access_token = res.data.access_token;
+ userStore.user.username = res.data.username;
+ userStore.user.avatar = res.data.avatar;
+ userStore.user.nickname = res.data.nickname;
+ userStore.user.status = res.data.status;
+ await getUserDevice();
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
setTimeout(() => {
diff --git a/src/views/Login/LoginPage.vue b/src/views/Login/LoginPage.vue
index 03570ec..b36e7e5 100644
--- a/src/views/Login/LoginPage.vue
+++ b/src/views/Login/LoginPage.vue
@@ -207,6 +207,7 @@ const showPhoneRotateCaptcha = ref(false);
const showAccountRotateCaptcha = ref(false);
const captchaData = reactive({angle: 0, image: "", thumb: "", key: ""});
const loginLoading = ref(false);
+const userStore = useStore().user;
const phoneLoginRotateEvent = {
confirm: (angle: number) => {
checkPhoneLoginCaptchaDebounce(angle);
@@ -378,13 +379,12 @@ async function phoneLoginSubmit() {
loginLoading.value = true;
const res: any = await phoneLoginApi(phoneLoginForm);
if (res.code === 200 && res.success) {
- const userStore = useStore().user;
- const {uid, access_token, refresh_token, expires_at, user_info} = res.data;
- userStore.user.uid = uid;
- userStore.user.accessToken = access_token;
- userStore.user.refreshToken = refresh_token;
- userStore.user.expiresAt = expires_at;
- userStore.user.userInfo = user_info;
+ userStore.user.uid = res.data.uid;
+ userStore.user.access_token = res.data.access_token;
+ userStore.user.username = res.data.username;
+ userStore.user.avatar = res.data.avatar;
+ userStore.user.nickname = res.data.nickname;
+ userStore.user.status = res.data.status;
message.success(t('login.loginSuccess'));
loginLoading.value = false;
setTimeout(() => {
@@ -461,13 +461,12 @@ async function checkAccountLoginCaptcha(angle: number) {
loginLoading.value = true;
const res: any = await accountLoginApi(params);
if (res.code === 200 && res.success) {
- const userStore = useStore().user;
- const {uid, access_token, refresh_token, expires_at, user_info} = res.data;
- userStore.user.uid = uid;
- userStore.user.accessToken = access_token;
- userStore.user.refreshToken = refresh_token;
- userStore.user.expiresAt = expires_at;
- userStore.user.userInfo = user_info;
+ userStore.user.uid = res.data.uid;
+ userStore.user.access_token = res.data.access_token;
+ userStore.user.username = res.data.username;
+ userStore.user.avatar = res.data.avatar;
+ userStore.user.nickname = res.data.nickname;
+ userStore.user.status = res.data.status;
message.success(t('login.loginSuccess'));
loginLoading.value = false;
showAccountRotateCaptcha.value = false;
diff --git a/src/views/Main/MainPage.vue b/src/views/Main/MainPage.vue
index 7ac6128..b772092 100644
--- a/src/views/Main/MainPage.vue
+++ b/src/views/Main/MainPage.vue
@@ -17,7 +17,7 @@ import {SmileOutlined} from "@ant-design/icons-vue";
const websocket = useStore().websocket;
const userInfo = useStore().user;
const wsOptions = {
- url: import.meta.env.VITE_MESSAGE_SOCKET_URL + "?user_id=" + userInfo.user.uid + "&token=" + userInfo.user.accessToken,
+ url: import.meta.env.VITE_MESSAGE_SOCKET_URL + "?user_id=" + userInfo.user.uid + "&token=" + userInfo.user.access_token,
};
onMounted(() => {
diff --git a/src/views/QRLogin/QRLogin.vue b/src/views/QRLogin/QRLogin.vue
index 3d50255..7f75226 100644
--- a/src/views/QRLogin/QRLogin.vue
+++ b/src/views/QRLogin/QRLogin.vue
@@ -71,6 +71,7 @@ const client = useStore().client;
const qrcode = ref('');
const status = ref('loading');
const websocket = useStore().websocket;
+const userStore = useStore().user;
/**
* 获取client_id
@@ -87,14 +88,14 @@ async function getClientId() {
* 获取二维码
*/
async function getQrCode() {
- const res: any = await generateQrCode(client.getClientId() || "");
- if (res.code === 200 && res.data) {
- status.value = 'active';
- qrcode.value = res.data;
- await handleListenMessage();
- } else {
- status.value = 'expired';
- }
+ const res: any = await generateQrCode(client.getClientId() || "");
+ if (res.code === 200 && res.data) {
+ status.value = 'active';
+ qrcode.value = res.data;
+ await handleListenMessage();
+ } else {
+ status.value = 'expired';
+ }
}
@@ -109,17 +110,16 @@ const wsOptions = {
async function handleListenMessage() {
websocket.initialize(wsOptions);
// 注册消息接收处理函数
- websocket.on('message', async (data: any) => {
- if (data.code === 200 && data.data) {
- const user = useStore().user;
- const {access_token, refresh_token, uid, expires_at, user_info} = data.data;
- user.user.accessToken = access_token;
- user.user.refreshToken = refresh_token;
- user.user.uid = uid;
- user.user.expiresAt = expires_at;
- user.user.userInfo = user_info;
+ websocket.on('message', async (res: any) => {
+ if (res.code === 200 && res.data) {
+ userStore.user.uid = res.data.uid;
+ userStore.user.access_token = res.data.access_token;
+ userStore.user.username = res.data.username;
+ userStore.user.avatar = res.data.avatar;
+ userStore.user.nickname = res.data.nickname;
+ userStore.user.status = res.data.status;
status.value = 'scanned';
- await getUserDevice(uid);
+ await getUserDevice();
message.success(t('login.loginSuccess'));
setTimeout(() => {
router.push('/main');
diff --git a/src/views/QRLogin/QRLoginFooter.vue b/src/views/QRLogin/QRLoginFooter.vue
index 5d77c6e..3f64d97 100644
--- a/src/views/QRLogin/QRLoginFooter.vue
+++ b/src/views/QRLogin/QRLoginFooter.vue
@@ -39,7 +39,7 @@ const {t} = useI18n();
const githubRedirectUrl = ref('');
const giteeRedirectUrl = ref('');
const qqRedirectUrl = ref('');
-
+const userStore = useStore().user;
/**
* Get the redirect url of Github OAuth
*/
@@ -98,16 +98,15 @@ function openGithubUrl() {
const messageHandler = async (e: any) => {
if (typeof e.data === 'string') {
- const data: any = JSON.parse(e.data);
- if (data.code === 200 && data.data) {
- const user = useStore().user;
- const {access_token, refresh_token, uid, expires_at, user_info} = data.data;
- user.user.accessToken = access_token;
- user.user.refreshToken = refresh_token;
- user.user.uid = uid;
- user.user.expiresAt = expires_at;
- user.user.userInfo = user_info;
- await getUserDevice(uid);
+ const res: any = JSON.parse(e.data);
+ if (res.code === 200 && res.data) {
+ userStore.user.uid = res.data.uid;
+ userStore.user.access_token = res.data.access_token;
+ userStore.user.username = res.data.username;
+ userStore.user.avatar = res.data.avatar;
+ userStore.user.nickname = res.data.nickname;
+ userStore.user.status = res.data.status;
+ await getUserDevice();
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
setTimeout(() => {
@@ -141,16 +140,15 @@ function openGiteeUrl() {
const messageHandler = async (e: any) => {
if (typeof e.data === 'string') {
- const data: any = JSON.parse(e.data);
- if (data.code === 200 && data.data) {
- const user = useStore().user;
- const {access_token, refresh_token, uid, expires_at, user_info} = data.data;
- user.user.accessToken = access_token;
- user.user.refreshToken = refresh_token;
- user.user.uid = uid;
- user.user.expiresAt = expires_at;
- user.user.userInfo = user_info;
- await getUserDevice(uid);
+ const res: any = JSON.parse(e.data);
+ if (res.code === 200 && res.data) {
+ userStore.user.uid = res.data.uid;
+ userStore.user.access_token = res.data.access_token;
+ userStore.user.username = res.data.username;
+ userStore.user.avatar = res.data.avatar;
+ userStore.user.nickname = res.data.nickname;
+ userStore.user.status = res.data.status;
+ await getUserDevice();
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
setTimeout(() => {
@@ -183,16 +181,15 @@ function openQQUrl() {
const messageHandler = async (e: any) => {
if (typeof e.data === 'string') {
- const data: any = JSON.parse(e.data);
- if (data.code === 200 && data.data) {
- const user = useStore().user;
- const {access_token, refresh_token, uid, expires_at, user_info} = data.data;
- user.user.accessToken = access_token;
- user.user.refreshToken = refresh_token;
- user.user.uid = uid;
- user.user.expiresAt = expires_at;
- user.user.userInfo = user_info;
- await getUserDevice(uid);
+ const res: any = JSON.parse(e.data);
+ if (res.code === 200 && res.data) {
+ userStore.user.uid = res.data.uid;
+ userStore.user.access_token = res.data.access_token;
+ userStore.user.username = res.data.username;
+ userStore.user.avatar = res.data.avatar;
+ userStore.user.nickname = res.data.nickname;
+ userStore.user.status = res.data.status;
+ await getUserDevice();
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
setTimeout(() => {