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:
Felipe Martin 2024-12-09 14:34:45 +01:00 committed by GitHub
parent fb51755e32
commit 6ccd64f1e5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 33 additions and 7 deletions

View file

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

View file

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