Joakim Mörling
81e3968e31
Previously an expired token left the frontend in a stuck state: the
router guard only checked token presence (never the exp claim), so the
user could still navigate to protected pages, and every API call then
failed with a generic Swedish "Kunde inte hämta…" message while the
header kept showing the logged-in UI. There was no global response
interceptor, and the backend returned an ambiguous 403 (no body) for
unauthenticated requests because no AuthenticationEntryPoint was
configured, making 403 mean both "no/invalid token" and "forbidden".
Backend:
- Add an AuthenticationEntryPoint in SecurityConfig that returns 401
with a Swedish {"message": ...} ErrorResponse body for
unauthenticated/expired-token requests, and an AccessDeniedHandler
returning 403 with the same body shape for genuine authorization
failures. This makes 401 = not authenticated/expired and
403 = authenticated but forbidden, the standard REST convention.
- Make JwtService(String, long) constructor public so integration
tests can mint expired tokens (was package-private).
- Update the 6 no-auth controller tests from 403 to 401
(OrderControllerTest, AdminControllerTest, PaymentControllerTest,
AuthControllerTest change-password/change-email) and assert the
message body exists; keep shouldReturn403ForNonAdminUser as 403.
- Add OrderControllerTest.shouldReturn401WithSwedishMessageWhenTokenExpired
(expired JWT via TTL -1000ms) and shouldReturn401WithMessageWhenNoAuthHeader.
Frontend:
- Add isTokenExpired() to utils/jwt.ts using the previously-unused exp
claim, and expose it on the auth store.
- Add a global 401 interceptor in api/client.ts: on a 401 from any
non-/auth/ endpoint, call auth.logout() and redirect to
/logga-in?redirect=<currentPath>. Skip /auth/ so wrong-password 401s
on login/change-password stay handled locally. Add isSessionExpired
and isForbidden helpers for per-page catch blocks.
- Harden the router guard to reject tokens whose exp is in the past
(logout + redirect to login with ?redirect=), and let expired-token
users open /logga-in and /registrera instead of bouncing to home.
- Refactor the generic-error catch blocks on OrdersPage, EditOrderPage,
ComposePage, PaymentRedirect, useAdminOrders, and useAdminOrderActions
to skip the generic Swedish message on 401 (handled globally) while
preserving wrong-password 401 handling on change-pw/email pages.
Tests:
- New frontend/src/__tests__/client.spec.ts covering 401 -> logout +
redirect, 401 from /auth/ -> no logout, 403 -> no logout, no-token
401 -> no redirect, and isSessionExpired/isForbidden helpers.
- Add authStore.spec.ts cases for isTokenExpired (no token, past exp,
future exp, missing exp, after logout).
- Add Router.spec.ts cases for expired-token redirects, token clearing,
future-exp access, and guest pages not bouncing expired users.
- Add OrdersPage.spec.ts case asserting 401 triggers no generic error
and the global logout/redirect.
- New E2E expired-token.spec.ts (Docker) covering both the router-guard
expired-token redirect and the API-401 redirect, with logged-out
header and cleared localStorage assertions.
- Mock the API in two pre-existing fake-JWT E2E tests
(auth-guards admin access, header-auth logout redirect) that broke
because the backend now correctly 401s their unsigned test-sig tokens.
Verified with ./gradlew check (frontend lint + 267 unit tests, backend
tests + coverage, Flyway, 92 E2E tests in Docker) and ./gradlew coverage;
all coverage thresholds maintained (jwt.ts at 100%).
83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
import { ref, computed } from 'vue'
|
|
import { register, login, changeEmail, confirmEmailChange } from '@/api/auth'
|
|
import { parseJwtPayload, isTokenExpired as isJwtExpired } from '@/utils/jwt'
|
|
|
|
export const useAuthStore = defineStore('auth', () => {
|
|
const token = ref<string | null>(localStorage.getItem('auth_token'))
|
|
const role = ref<string | null>(extractRole(token.value))
|
|
|
|
const isAuthenticated = computed(() => token.value !== null)
|
|
const isAdmin = computed(() => role.value === 'admin')
|
|
const email = computed(() => {
|
|
if (!token.value) return null
|
|
const payload = parseJwtPayload(token.value)
|
|
return payload.sub ?? null
|
|
})
|
|
|
|
function extractRole(jwt: string | null): string | null {
|
|
if (!jwt) return null
|
|
const payload = parseJwtPayload(jwt)
|
|
return payload.role ?? null
|
|
}
|
|
|
|
function isTokenExpired(): boolean {
|
|
return isJwtExpired(token.value)
|
|
}
|
|
|
|
function setToken(newToken: string) {
|
|
token.value = newToken
|
|
role.value = extractRole(newToken)
|
|
localStorage.setItem('auth_token', newToken)
|
|
}
|
|
|
|
function clearToken() {
|
|
token.value = null
|
|
role.value = null
|
|
localStorage.removeItem('auth_token')
|
|
}
|
|
|
|
async function registerUser(email: string, password: string): Promise<void> {
|
|
const response = await register(email, password)
|
|
setToken(response.token)
|
|
}
|
|
|
|
async function loginUser(email: string, password: string): Promise<void> {
|
|
const response = await login(email, password)
|
|
setToken(response.token)
|
|
}
|
|
|
|
async function changeUserEmail(
|
|
newEmail: string,
|
|
password: string,
|
|
): Promise<string | undefined> {
|
|
const response = await changeEmail(newEmail, password)
|
|
return response.testToken
|
|
}
|
|
|
|
async function confirmUserEmailChange(
|
|
token: string,
|
|
password: string,
|
|
): Promise<void> {
|
|
const response = await confirmEmailChange(token, password)
|
|
setToken(response.token)
|
|
}
|
|
|
|
function logout() {
|
|
clearToken()
|
|
}
|
|
|
|
return {
|
|
token,
|
|
role,
|
|
email,
|
|
isAuthenticated,
|
|
isAdmin,
|
|
isTokenExpired,
|
|
registerUser,
|
|
loginUser,
|
|
changeUserEmail,
|
|
confirmUserEmailChange,
|
|
logout,
|
|
}
|
|
})
|