chore: 将用户登录退出等操作抽离为公共 JS 脚本
This commit is contained in:
Frankie Huang
parent
2266162984
commit
079109aa23
@ -8,7 +8,7 @@
|
||||
<Checkbox v-model="autoLogin" size="large">记住登录状态</Checkbox>
|
||||
<!-- <a>忘记密码</a> -->
|
||||
</div>
|
||||
<Submit />
|
||||
<Submit :loading="submitLoading" />
|
||||
<Space split>还未拥有账号？<Button type="text" @click="signInOrSignUp = false">前往注册</Button></Space>
|
||||
</Login>
|
||||
<Login v-else @on-submit="handleSignUp">
|
||||
@ -16,16 +16,16 @@
|
||||
<Email name="mail" />
|
||||
<Password name="password" />
|
||||
<Password name="passwordConfirm" placeholder="确认密码" />
|
||||
<Submit>注册</Submit>
|
||||
<Submit :loading="submitLoading">注册</Submit>
|
||||
<Space split>已经拥有账号？<Button type="text" @click="signInOrSignUp = true">前往登录</Button></Space>
|
||||
</Login>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import md5 from 'js-md5';
|
||||
import { SignIn, SignUp, SendSignUpEmail, CheckLoginStatus, Logout } from '/src/utils/userHandler';
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { Message } from 'view-ui-plus'
|
||||
import { Message } from 'view-ui-plus';
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
@ -56,57 +56,26 @@ watch(showFormModal, (visible) => {
|
||||
|
||||
const signInOrSignUp = ref(true);
|
||||
const autoLogin = ref(false);
|
||||
|
||||
// 由于是跨域登录，需要手动设置并携带 Cookie
|
||||
const setPHPSessionToCookie = (sessionID) => {
|
||||
if (sessionID) {
|
||||
document.cookie = `PHPSESSID=${sessionID}; max-age=604800; SameSite=None; secure; path=/`;
|
||||
}
|
||||
}
|
||||
const getPHPSessionFromCookie = () => {
|
||||
let PHPSESSID = '';
|
||||
const cookies = document.cookie.split('; ');
|
||||
cookies.forEach(cookie => {
|
||||
const [key, value] = cookie.split('=');
|
||||
if (key === 'PHPSESSID') {
|
||||
PHPSESSID = decodeURIComponent(value); // 解码特殊字符（如空格、%20）
|
||||
}
|
||||
});
|
||||
return PHPSESSID;
|
||||
}
|
||||
const delPHPSessionFromCookie = () => {
|
||||
document.cookie = `PHPSESSID=; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
|
||||
}
|
||||
const submitLoading = ref(false);
|
||||
|
||||
const handleSignIn = (valid, { username, password }) => {
|
||||
if (valid) {
|
||||
fetch('https://myafei.cn/php/ajax.php', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
'func': 'login',
|
||||
'username': username,
|
||||
'is_email': /^[0-9a-zA-Z_-]{1,100}$/.test(username) ? false : true,
|
||||
'password': md5(password),
|
||||
'isRemember': autoLogin.value,
|
||||
}),
|
||||
}).then(response => {
|
||||
if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
|
||||
return response.json();
|
||||
}).then(data => {
|
||||
if (data.status == 0) {
|
||||
Message.success('登录成功');
|
||||
setPHPSessionToCookie(data.PHPSESSID);
|
||||
// 将登录成功的状态通知父组件
|
||||
emit('update:loginStatus', true);
|
||||
// 关闭对话框
|
||||
showFormModal.value = false;
|
||||
} else {
|
||||
Message.error(data.error);
|
||||
}
|
||||
}).catch(error => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
submitLoading.value = true;
|
||||
SignIn(username, password, autoLogin.value)
|
||||
.then((data) => {
|
||||
Message.success('登录成功');
|
||||
// 将登录成功的状态通知父组件
|
||||
emit('update:loginStatus', true);
|
||||
// 停止 loading，关闭对话框
|
||||
submitLoading.value = false;
|
||||
showFormModal.value = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
submitLoading.value = false;
|
||||
Message.error(`登录发生异常: ${error}`);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSignUp = (valid, { username, mail, password, passwordConfirm }) => {
|
||||
@ -118,107 +87,47 @@ const handleSignUp = (valid, { username, mail, password, passwordConfirm }) => {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('https://myafei.cn/php/ajax.php', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
'func': 'register',
|
||||
'username': username,
|
||||
'email': mail,
|
||||
'password': md5(password),
|
||||
}),
|
||||
}).then(response => {
|
||||
if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
|
||||
return response.json();
|
||||
}).then(data => {
|
||||
if (data.status == 0) {
|
||||
// 发送邮件
|
||||
sendSignUpEmail(data.id);
|
||||
} else {
|
||||
Message.error(data.error);
|
||||
}
|
||||
}).catch(error => {
|
||||
Message.error(`注册发生异常: ${error}`);
|
||||
});
|
||||
submitLoading.value = true;
|
||||
SignUp(username, mail, password)
|
||||
.then((data) => {
|
||||
// 注册后会返回一个 userID，用于发送激活邮件
|
||||
SendSignUpEmail(data.id)
|
||||
.then((data) => {
|
||||
Message.success('请前往邮箱激活账号(没收到的话检查垃圾箱)，激活后再回来登录账号');
|
||||
// 发送邮件成功，（从注册界面）回到登录窗口
|
||||
submitLoading.value = false;
|
||||
signInOrSignUp.value = true;
|
||||
})
|
||||
.catch((error) => {
|
||||
submitLoading.value = false;
|
||||
Message.error(`发送激活邮件发生异常: ${error}`);
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
submitLoading.value = false;
|
||||
Message.error(`注册发生异常: ${error}`);
|
||||
});
|
||||
};
|
||||
|
||||
const sendSignUpEmail = (userID) => {
|
||||
fetch('https://myafei.cn/php/ajax.php', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
'func': 'resend_email',
|
||||
'id': userID,
|
||||
'path': '/',
|
||||
}),
|
||||
}).then(response => {
|
||||
if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
|
||||
return response.json();
|
||||
}).then(data => {
|
||||
if (data.status == 0) {
|
||||
Message.success('请前往邮箱激活账号(没收到的话检查垃圾箱)，激活后再回来登录账号');
|
||||
// 回到登录窗口
|
||||
signInOrSignUp.value = true;
|
||||
} else if (data.status == -100) {
|
||||
Message.warning('邮箱已被激活');
|
||||
} else {
|
||||
Message.error('激活邮件发送失败:' + data.error);
|
||||
}
|
||||
}).catch(error => {
|
||||
Message.error(`邮件发送异常: ${error}`);
|
||||
});
|
||||
}
|
||||
|
||||
const checkLoginStatus = async () => {
|
||||
// 先从 cookie 中拿到 PHPSESSID
|
||||
const PHPSESSID = getPHPSessionFromCookie();
|
||||
let loginStatus = false;
|
||||
await fetch('https://myafei.cn/php/ajax.php?PHPSESSID=' + PHPSESSID, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
'func': 'is_login',
|
||||
}),
|
||||
}).then(response => {
|
||||
if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
|
||||
return response.json();
|
||||
}).then(data => {
|
||||
if (data.status == 0) {
|
||||
CheckLoginStatus()
|
||||
.then((data) => {
|
||||
emit('update:loginStatus', true);
|
||||
loginStatus = true;
|
||||
} else {
|
||||
loginStatus = false;
|
||||
}
|
||||
}).catch(error => {
|
||||
Message.error(`检查登录状态时发生异常: ${error}`);
|
||||
loginStatus = false;
|
||||
});
|
||||
return loginStatus;
|
||||
})
|
||||
.catch((error) => {
|
||||
Message.error(`检查登录状态发生异常: ${error}`);
|
||||
});
|
||||
}
|
||||
|
||||
const logout = async () => {
|
||||
const PHPSESSID = getPHPSessionFromCookie();
|
||||
let logoutStatus = false;
|
||||
await fetch('https://myafei.cn/php/ajax.php?PHPSESSID=' + PHPSESSID, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
'func': 'logout',
|
||||
}),
|
||||
}).then(response => {
|
||||
if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
|
||||
return response.json();
|
||||
}).then(data => {
|
||||
if (data.status == 0) {
|
||||
Logout()
|
||||
.then((data) => {
|
||||
Message.info('登出成功');
|
||||
delPHPSessionFromCookie();
|
||||
emit('update:loginStatus', false);
|
||||
logoutStatus = true;
|
||||
} else {
|
||||
Message.error(data.error);
|
||||
logoutStatus = false;
|
||||
}
|
||||
}).catch(error => {
|
||||
Message.error(`登出发生异常: ${error}`);
|
||||
logoutStatus = false;
|
||||
});
|
||||
return logoutStatus;
|
||||
})
|
||||
.catch((error) => {
|
||||
Message.error(`登出发生异常: ${error}`);
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
|
||||
158
src/utils/userHandler.js
Normal file
158
src/utils/userHandler.js
Normal file
@ -0,0 +1,158 @@
|
||||
import md5 from 'js-md5';
|
||||
|
||||
// 由于是跨域登录，需要手动设置并携带 Cookie
|
||||
const setPHPSessionToCookie = (sessionID) => {
|
||||
if (sessionID) {
|
||||
document.cookie = `PHPSESSID=${sessionID}; max-age=604800; SameSite=None; secure; path=/`;
|
||||
}
|
||||
}
|
||||
|
||||
const getPHPSessionFromCookie = () => {
|
||||
let PHPSESSID = '';
|
||||
const cookies = document.cookie.split('; ');
|
||||
cookies.forEach(cookie => {
|
||||
const [key, value] = cookie.split('=');
|
||||
if (key === 'PHPSESSID') {
|
||||
PHPSESSID = decodeURIComponent(value); // 解码特殊字符（如空格、%20）
|
||||
}
|
||||
});
|
||||
return PHPSESSID;
|
||||
}
|
||||
|
||||
const delPHPSessionFromCookie = () => {
|
||||
document.cookie = `PHPSESSID=; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
|
||||
}
|
||||
|
||||
const SignIn = (username, password, autoLogin) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
fetch('https://myafei.cn/php/ajax.php', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
'func': 'login',
|
||||
'username': username,
|
||||
'is_email': /^[0-9a-zA-Z_-]{1,100}$/.test(username) ? false : true,
|
||||
'password': md5(password),
|
||||
'isRemember': autoLogin,
|
||||
}),
|
||||
}).then(response => {
|
||||
if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
|
||||
return response.json();
|
||||
}).then(data => {
|
||||
if (data.status == 0) {
|
||||
setPHPSessionToCookie(data.PHPSESSID);
|
||||
resolve(data);
|
||||
} else {
|
||||
reject(new Error(data.error));
|
||||
}
|
||||
}).catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
const SignUp = (username, mail, password) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
fetch('https://myafei.cn/php/ajax.php', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
'func': 'register',
|
||||
'username': username,
|
||||
'email': mail,
|
||||
'password': md5(password),
|
||||
}),
|
||||
}).then(response => {
|
||||
if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
|
||||
return response.json();
|
||||
}).then(data => {
|
||||
if (data.status == 0) {
|
||||
resolve(data);
|
||||
} else {
|
||||
reject(new Error(data.error));
|
||||
}
|
||||
}).catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const SendSignUpEmail = (userID) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
fetch('https://myafei.cn/php/ajax.php', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
'func': 'resend_email',
|
||||
'id': userID,
|
||||
'path': '/',
|
||||
}),
|
||||
}).then(response => {
|
||||
if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
|
||||
return response.json();
|
||||
}).then(data => {
|
||||
if (data.status == 0) {
|
||||
resolve(data);
|
||||
} else if (data.status == -100) {
|
||||
reject(new Error('邮箱已被激活'));
|
||||
} else {
|
||||
reject(new Error(data.error));
|
||||
}
|
||||
}).catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const CheckLoginStatus = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 先从 cookie 中拿到 PHPSESSID
|
||||
const PHPSESSID = getPHPSessionFromCookie();
|
||||
fetch('https://myafei.cn/php/ajax.php?PHPSESSID=' + PHPSESSID, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
'func': 'is_login',
|
||||
}),
|
||||
}).then(response => {
|
||||
if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
|
||||
return response.json();
|
||||
}).then(data => {
|
||||
if (data.status == 0) {
|
||||
resolve(data);
|
||||
} else {
|
||||
reject(new Error(data.error));
|
||||
}
|
||||
}).catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const Logout = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const PHPSESSID = getPHPSessionFromCookie();
|
||||
fetch('https://myafei.cn/php/ajax.php?PHPSESSID=' + PHPSESSID, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
'func': 'logout',
|
||||
}),
|
||||
}).then(response => {
|
||||
if (!response.ok) throw new Error(`HTTP 错误: ${response.status}`);
|
||||
return response.json();
|
||||
}).then(data => {
|
||||
if (data.status == 0) {
|
||||
delPHPSessionFromCookie();
|
||||
resolve();
|
||||
} else {
|
||||
reject(new Error(data.error));
|
||||
}
|
||||
}).catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export {
|
||||
SignIn,
|
||||
SignUp,
|
||||
SendSignUpEmail,
|
||||
CheckLoginStatus,
|
||||
Logout,
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user