SCHISANDRA/schisandra-cloud-album-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 update login logic

Browse Source
This commit is contained in:
landaiqing
2024-11-05 17:27:05 +08:00
parent c0269dfa5a
commit 462818ff9d
19 changed files with 117 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/comment/index.ts
View File

@@ -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,
},

13
src/api/user/index.ts
View File

@@ -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,
}

7
src/components/CommentReply/src/CommentInput/CommentInput.vue
View File

@@ -2,7 +2,7 @@
<div class="comment">
<AFlex :vertical="false">
<AFlex :vertical="true">
<AAvatar :size="50" class="comment-avatar" shape="circle" :src="user.user.userInfo.avatar"/>
<AAvatar :size="50" class="comment-avatar" shape="circle" :src="user.user.avatar"/>
</AFlex>
<AFlex :vertical="true" class="comment-content">
<ATextarea :rows="4" class="comment-text" @focus="onFocusHandler"
@@ -163,7 +163,6 @@ async function commentSubmit(point: any) {
return `<img width="30px" height="30px" loading="lazy" src="/emoji/qq/gif/${p1}" alt="emoji ${p1}" />`;
});
const commentParams: object = {
user_id: user.user.uid,
topic_id: topicId.value,
content: contentWithEmoji,
images: comment.imageList,
@@ -177,8 +176,8 @@ async function commentSubmit(point: any) {
user_id: user.user.uid,
content: result.data.content,
images: comment.imageList,
nickname: user.user.userInfo.nickname,
avatar: user.user.userInfo.avatar,
nickname: user.user.nickname,
avatar: user.user.avatar,
id: result.data.id,
created_time: result.data.created_time,
browser: result.data.browser,

6
src/components/CommentReply/src/CommentList/CommentList.vue
View File

@@ -180,7 +180,7 @@ import UserInfoCard from "@/components/CommentReply/src/UserInfoCard/UserInfoCar
const {t} = useI18n();
const router = useRouter();
const comment = useStore().comment;
const user = useStore().user;
const topicId = ref<string>("123");
@@ -190,7 +190,6 @@ const topicId = ref<string>("123");
*/
async function getCommentList(page: number = 1, size: number = 5, hot: boolean = true) {
const params = {
user_id: user.user.uid,
topic_id: topicId.value,
page: page,
size: size,
@@ -247,7 +246,6 @@ async function getReplyList(reply_id: number, page: number = 1, size: number = 5
page: page,
size: size,
comment_id: reply_id,
user_id: user.user.uid,
};
await comment.getReplyList(params);
}
@@ -261,7 +259,6 @@ const commentLikeThrottled = useThrottleFn(commentLike, 1000);
async function commentLike(item: any) {
const params: any = {
comment_id: item.id,
user_id: user.user.uid,
topic_id: topicId.value,
};
const res: boolean = await comment.commentLike(params);
@@ -280,7 +277,6 @@ const cancelCommentLikeThrottled = useThrottleFn(cancelCommentLike, 1000);
async function cancelCommentLike(item: any) {
const params: any = {
comment_id: item.id,
user_id: user.user.uid,
topic_id: topicId.value,
};
const res: boolean = await comment.cancelCommentLike(params);

6
src/components/CommentReply/src/ReplyInput/ReplyInput.vue
View File

@@ -170,14 +170,12 @@ async function replySubmit(point: any) {
images: any;
reply_id: number;
reply_user: string;
user_id: any;
author: any;
topic_id: string;
content: any;
point: [number, number];
key: any;
} = {
user_id: user.user.uid,
topic_id: topicId.value,
content: contentWithEmoji,
images: comment.imageList,
@@ -203,8 +201,8 @@ async function replySubmit(point: any) {
likes: result.data.likes,
reply_count: result.data.reply_count,
reply_user: result.data.reply_user,
nickname: user.user.userInfo.nickname,
avatar: user.user.userInfo.avatar,
nickname: user.user.nickname,
avatar: user.user.avatar,
is_liked: false,
reply_username: props.item.nickname,
};

4
src/components/CommentReply/src/ReplyList/ReplyList.vue
View File

@@ -150,7 +150,6 @@ import UserInfoCard from "@/components/CommentReply/src/UserInfoCard/UserInfoCar
const {t} = useI18n();
const comment = useStore().comment;
const user = useStore().user;
const topicId = ref<string>("123");
const props = defineProps({
item: {
@@ -198,7 +197,6 @@ const commentLikeThrottled = useThrottleFn(commentLike, 1000);
async function commentLike(item: any) {
const params: any = {
comment_id: item.id,
user_id: user.user.uid,
topic_id: topicId.value,
};
const res: boolean = await comment.commentLike(params);
@@ -217,7 +215,6 @@ const cancelCommentLikeThrottled = useThrottleFn(cancelCommentLike, 1000);
async function cancelCommentLike(item: any) {
const params: any = {
comment_id: item.id,
user_id: user.user.uid,
topic_id: topicId.value,
};
const res: boolean = await comment.cancelCommentLike(params);
@@ -243,7 +240,6 @@ async function getReplyList(page: number, pageSize: number) {
page: page,
size: pageSize,
comment_id: props.item.id,
user_id: user.user.uid,
};
await comment.getReplyList(params);
}

5
src/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue
View File

@@ -178,7 +178,6 @@ async function replyReplySubmit(point: any) {
return `<img width="30px" height="30px" loading="lazy" src="/emoji/qq/gif/${p1}" alt="emoji ${p1}" />`;
});
const replyParams: ReplyCommentParams = {
user_id: user.user.uid,
topic_id: topicId.value,
content: contentWithEmoji,
images: comment.imageList,
@@ -205,8 +204,8 @@ async function replyReplySubmit(point: any) {
likes: result.data.likes,
reply_count: result.data.reply_count,
reply_user: result.data.reply_user,
nickname: user.user.userInfo.nickname,
avatar: user.user.userInfo.avatar,
nickname: user.user.nickname,
avatar: user.user.avatar,
is_liked: false,
reply_username: props.item.nickname,
reply_to: result.data.reply_to,

2
src/components/CommentReply/src/UserInfoCard/UserInfoCard.vue
View File

@@ -6,7 +6,7 @@
</div>
<AFlex :vertical="false" class="user-info-card-name" style="">
<AFlex :vertical="true" justify="flex-start">
<AAvatar :size="48" :src="users.user.userInfo.avatar" class="user-info-card-avatar"/>
<AAvatar :size="48" :src="users.user.avatar" class="user-info-card-avatar"/>
</AFlex>
<AFlex :vertical="true" justify="flex-start" class="user-info-card-content-container">
<AFlex :vertical="false" align="center">

1
src/components/CommentReply/src/UserInfoCard/index.scss
View File

@@ -15,6 +15,7 @@
margin-left: 10px;
.user-info-card-name-text {
color: var(--text-color);
font-size: 15px;
font-weight: 600;
}

4
src/components/MyUI/Popover/Popover.vue
View File

@@ -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"

2
src/layout/default/Header/Header.vue
View File

@@ -26,7 +26,7 @@
</ADropdown>
</AFlex>
<AFlex :vertical="false" align="center" justify="flex-start" class="header-user-container">
<AAvatar :size="35" class="header-user-avatar" :src="user.user.userInfo.avatar"/>
<AAvatar :size="35" class="header-user-avatar" :src="user.user.avatar"/>
<AButton type="text" size="small" class="header-user-btn">landaiqing</AButton>
</AFlex>
</AFlex>

4
src/store/modules/commentStore.ts
View File

@@ -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<boolean> {
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<boolean> {
const params: any = {
comment_id: data.comment_id,
user_id: data.user_id,
topic_id: data.topic_id,
};
const result: any = await cancelCommentLikeApi(params);

18
src/store/modules/userStore.ts
View File

@@ -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 {

11
src/utils/alova/service.ts
View File

@@ -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(() => {

59
src/views/Login/LoginFooter.vue
View File

@@ -38,7 +38,7 @@ const githubRedirectUrl = ref<string>('');
const giteeRedirectUrl = ref<string>('');
const qqRedirectUrl = ref<string>('');
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(() => {

27
src/views/Login/LoginPage.vue
View File

@@ -207,6 +207,7 @@ const showPhoneRotateCaptcha = ref<boolean>(false);
const showAccountRotateCaptcha = ref<boolean>(false);
const captchaData = reactive({angle: 0, image: "", thumb: "", key: ""});
const loginLoading = ref<boolean>(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;

2
src/views/Main/MainPage.vue
View File

@@ -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(() => {

36
src/views/QRLogin/QRLogin.vue
View File

@@ -71,6 +71,7 @@ const client = useStore().client;
const qrcode = ref<string>('');
const status = ref<string>('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');

59
src/views/QRLogin/QRLoginFooter.vue
View File

@@ -39,7 +39,7 @@ const {t} = useI18n();
const githubRedirectUrl = ref<string>('');
const giteeRedirectUrl = ref<string>('');
const qqRedirectUrl = ref<string>('');
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(() => {