mirror of
https://github.com/go-shiori/shiori.git
synced 2024-12-27 02:04:27 +08:00
fix: login component behavior when logging out and refreshing the page (#1022)
* fix: Validate session on login component mount to prevent unnecessary login form * fix: Replace non-existent `api/v1/auth/check` with `api/v1/auth/me` * feat: Prevent login form flickering by conditionally rendering only when needed * feat: Show login component after user logout * fix: make styles
This commit is contained in:
parent
fb51755e32
commit
6ccd64f1e5
2 changed files with 33 additions and 7 deletions
|
@ -128,8 +128,31 @@ export default {
|
|||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// Clear any existing cookies
|
||||
async mounted() {
|
||||
// Check if there's a valid session first
|
||||
const token = localStorage.getItem("shiori-token");
|
||||
if (token) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
new URL("api/v1/auth/me", document.baseURI),
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
// Valid session exists, emit login success
|
||||
this.$emit("login-success");
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
// Continue with login form if check fails
|
||||
}
|
||||
}
|
||||
|
||||
// Clear session data if we reach here
|
||||
document.cookie = `session-id=; Path=${
|
||||
new URL(document.baseURI).pathname
|
||||
}; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
|
||||
|
@ -137,11 +160,10 @@ export default {
|
|||
new URL(document.baseURI).pathname
|
||||
}; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
|
||||
|
||||
// Clear local storage
|
||||
localStorage.removeItem("shiori-account");
|
||||
localStorage.removeItem("shiori-token");
|
||||
|
||||
// <input autofocus> wasn't working all the time, so I'm putting this here as a fallback
|
||||
// Focus username input
|
||||
this.$nextTick(() => {
|
||||
const usernameInput = document.querySelector("#username");
|
||||
if (usernameInput) {
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
<body>
|
||||
<div id="app">
|
||||
<login-view v-if="isLoggedIn === false" @login-success="onLoginSuccess"></login-view>
|
||||
<login-view v-if="isLoggedIn === false && loginRequired" @login-success="onLoginSuccess"></login-view>
|
||||
<div id="main-scene" v-else-if="isLoggedIn === true">
|
||||
<div id="main-sidebar">
|
||||
<a v-for="item in sidebarItems" :title="item.title" :class="{active: activePage === item.page}" @click="switchPage(item.page)">
|
||||
|
@ -59,7 +59,8 @@
|
|||
'login-view': LoginComponent
|
||||
},
|
||||
data: {
|
||||
isLoggedIn: false,
|
||||
isLoggedIn: null,
|
||||
loginRequired: false,
|
||||
activePage: "page-home",
|
||||
sidebarItems: [{
|
||||
title: "Home",
|
||||
|
@ -103,6 +104,7 @@
|
|||
document.cookie = `session-id=; Path=${new URL(document.baseURI).pathname}; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
|
||||
document.cookie = `token=; Path=${new URL(document.baseURI).pathname}; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
|
||||
this.isLoggedIn = false;
|
||||
this.loginRequired = true;
|
||||
}).catch(err => {
|
||||
this.dialog.loading = false;
|
||||
this.getErrorMessage(err).then(msg => {
|
||||
|
@ -169,7 +171,7 @@
|
|||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(new URL("api/v1/auth/check", document.baseURI), {
|
||||
const response = await fetch(new URL("api/v1/auth/me", document.baseURI), {
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`
|
||||
}
|
||||
|
@ -197,6 +199,8 @@
|
|||
if (isValid) {
|
||||
this.loadSetting();
|
||||
this.loadAccount();
|
||||
} else {
|
||||
this.loginRequired = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue