Kingsmai/pokopiawiki.tootaio.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): safely resolve route IDs and remove manual auth checks

Browse Source 
Prevent invalid API calls during route transitions in detail views
Allow builds for esbuild and @parcel/watcher in pnpm workspace
This commit is contained in:
xiaomai
2026-05-06 15:59:36 +08:00
parent f92e97b747
commit 70f7a73e6d
7 changed files with 101 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/views/HabitatDetail.vue
View File

@@ -13,7 +13,7 @@ import Skeleton from '../components/Skeleton.vue';
import Tabs, { type TabOption } from '../components/Tabs.vue';
import { iconBack, iconEdit, iconHabitat } from '../icons';
import { applySeo, resolvedSeoHead, resolveSeo } from '../seo';
import { api, getAuthToken, type AuthUser, type HabitatDetail } from '../services/api';
import { api, type AuthUser, type HabitatDetail } from '../services/api';
import HabitatEdit from './HabitatEdit.vue';
const route = useRoute();
@@ -23,6 +23,7 @@ const currentUser = ref<AuthUser | null>(null);
const detailTab = ref('details');
const timeOfDays = ['早晨', '中午', '傍晚', '晚上'];
const weathers = ['晴天', '阴天', '雨天'];
const habitatDetailRouteNames = new Set(['habitat-detail', 'habitat-edit']);
const showEditor = computed(() => route.name === 'habitat-edit');
const canUpdateHabitat = computed(() => currentUser.value?.permissions.includes('habitats.update') === true);
const listPath = computed(() => (habitat.value?.isEventItem ? '/event-habitats' : '/habitats'));
@@ -34,10 +35,15 @@ const detailTabs = computed<TabOption[]>(() => [
]);
const { data: initialHabitat } = await useAsyncData<HabitatDetail | null>(
`habitat-detail:${String(route.params.id)}:${locale.value}`,
`habitat-detail:${activeHabitatRouteId() ?? 'none'}:${locale.value}`,
async () => {
const routeId = activeHabitatRouteId();
if (!routeId) {
return null;
}
try {
return await api.habitatDetail(String(route.params.id));
return await api.habitatDetail(routeId);
} catch {
return null;
}
@@ -100,6 +106,15 @@ function weatherLabel(value: string): string {
return labels[value] ?? value;
}
function activeHabitatRouteId(): string | null {
return typeof route.name === 'string' &&
habitatDetailRouteNames.has(route.name) &&
typeof route.params.id === 'string' &&
route.params.id.trim() !== ''
? route.params.id
: null;
}
const pokemonRows = computed<PokemonRow[]>(() => {
if (!habitat.value) return [];
@@ -146,8 +161,14 @@ const pokemonRows = computed<PokemonRow[]>(() => {
});
async function loadHabitatDetail() {
const routeId = activeHabitatRouteId();
if (!routeId) {
initialHabitatLoaded.value = true;
return;
}
try {
const nextHabitat = await api.habitatDetail(String(route.params.id));
const nextHabitat = await api.habitatDetail(routeId);
habitat.value = nextHabitat;
initialHabitatLoaded.value = true;
@@ -166,13 +187,12 @@ async function loadHabitatDetail() {
}
onMounted(async () => {
if (getAuthToken()) {
try {
currentUser.value = (await api.me()).user;
} catch {
currentUser.value = null;
}
try {
currentUser.value = (await api.me()).user;
} catch {
currentUser.value = null;
}
if (!initialHabitatLoaded.value) {
await loadHabitatDetail();
}
@@ -190,6 +210,10 @@ watch(
watch(
() => route.params.id,
() => {
if (!activeHabitatRouteId()) {
return;
}
habitat.value = null;
detailTab.value = 'details';
void loadHabitatDetail();

6
frontend/src/views/HabitatEdit.vue
View File

@@ -13,7 +13,6 @@ import TranslationFields from '../components/TranslationFields.vue';
import { iconAdd, iconCancel, iconDelete, iconPokemon, iconSave } from '../icons';
import {
api,
getAuthToken,
type AuthUser,
type ConfigType,
type EntityImage,
@@ -156,11 +155,6 @@ function habitatNameForSave() {
}
async function loadCurrentUser() {
if (!getAuthToken()) {
currentUser.value = null;
return;
}
try {
currentUser.value = (await api.me()).user;
} catch {

40
frontend/src/views/ItemDetail.vue
View File

@@ -13,7 +13,7 @@ import Skeleton from '../components/Skeleton.vue';
import Tabs, { type TabOption } from '../components/Tabs.vue';
import { iconAdd, iconBack, iconEdit, iconHabitat, iconItem } from '../icons';
import { applySeo, resolvedSeoHead, resolveSeo } from '../seo';
import { api, getAuthToken, type AuthUser, type ItemDetail } from '../services/api';
import { api, type AuthUser, type ItemDetail } from '../services/api';
import ItemEdit from './ItemEdit.vue';
const route = useRoute();
@@ -74,10 +74,15 @@ const possibleTagEvidenceSections = computed(() => [
]);
const { data: initialItem } = await useAsyncData<ItemDetail | null>(
`item-detail:${String(route.name)}:${String(route.params.id)}:${locale.value}`,
`item-detail:${String(route.name)}:${activeItemRouteId() ?? 'none'}:${locale.value}`,
async () => {
const routeId = activeItemRouteId();
if (!routeId) {
return null;
}
try {
const nextItem = await api.itemDetail(String(route.params.id));
const nextItem = await api.itemDetail(routeId);
return isAncientArtifactRoute.value && !nextItem.ancientArtifactCategory ? null : nextItem;
} catch {
return null;
@@ -114,8 +119,14 @@ const customization = computed(() => {
});
async function loadItemDetail() {
const routeId = activeItemRouteId();
if (!routeId) {
initialItemLoaded.value = true;
return;
}
try {
const nextItem = await api.itemDetail(String(route.params.id));
const nextItem = await api.itemDetail(routeId);
if (isAncientArtifactRoute.value && !nextItem.ancientArtifactCategory) {
await router.replace(route.name === 'ancient-artifact-edit' ? `/items/${nextItem.id}/edit` : `/items/${nextItem.id}`);
@@ -143,14 +154,19 @@ function isItemDetailRouteName(value: unknown) {
return typeof value === 'string' && itemDetailRouteNames.has(value);
}
function activeItemRouteId(): string | null {
return isItemDetailRouteName(route.name) && typeof route.params.id === 'string' && route.params.id.trim() !== ''
? route.params.id
: null;
}
onMounted(async () => {
if (getAuthToken()) {
try {
currentUser.value = (await api.me()).user;
} catch {
currentUser.value = null;
}
try {
currentUser.value = (await api.me()).user;
} catch {
currentUser.value = null;
}
if (!initialItemLoaded.value) {
await loadItemDetail();
}
@@ -170,6 +186,10 @@ watch(
watch(
() => route.params.id,
() => {
if (!activeItemRouteId()) {
return;
}
item.value = null;
detailTab.value = 'details';
void loadItemDetail();

6
frontend/src/views/ItemEdit.vue
View File

@@ -12,7 +12,6 @@ import TranslationFields from '../components/TranslationFields.vue';
import { iconCancel, iconSave } from '../icons';
import {
api,
getAuthToken,
type AuthUser,
type ConfigType,
type EntityImage,
@@ -215,11 +214,6 @@ async function loadOptions() {
}
async function loadCurrentUser() {
if (!getAuthToken()) {
currentUser.value = null;
return;
}
try {
currentUser.value = (await api.me()).user;
} catch {

44
frontend/src/views/PokemonDetail.vue
View File

@@ -16,7 +16,7 @@ import StatusMessage from '../components/StatusMessage.vue';
import Tabs, { type TabOption } from '../components/Tabs.vue';
import { iconAdd, iconBack, iconCancel, iconCheck, iconEdit, iconHabitat, iconItem } from '../icons';
import { applySeo, resolvedSeoHead, resolveSeo } from '../seo';
import { api, getAuthToken, type AuthUser, type Item, type PokemonDetail, type PokemonPayload, type TradingPreference } from '../services/api';
import { api, type AuthUser, type Item, type PokemonDetail, type PokemonPayload, type TradingPreference } from '../services/api';
import PokemonEdit from './PokemonEdit.vue';
const route = useRoute();
@@ -39,12 +39,18 @@ const tradingDraftItems = ref<Array<{ itemId: number; preference: TradingPrefere
const timeOfDays = ['早晨', '中午', '傍晚', '晚上'];
const weathers = ['晴天', '阴天', '雨天'];
const relatedPokemonLimit = 6;
const pokemonDetailRouteNames = new Set(['pokemon-detail', 'pokemon-edit']);
const { data: initialPokemon } = await useAsyncData<PokemonDetail | null>(
`pokemon-detail:${String(route.params.id)}:${locale.value}`,
`pokemon-detail:${activePokemonRouteId() ?? 'none'}:${locale.value}`,
async () => {
const routeId = activePokemonRouteId();
if (!routeId) {
return null;
}
try {
return await api.pokemonDetail(String(route.params.id));
return await api.pokemonDetail(routeId);
} catch {
return null;
}
@@ -93,6 +99,15 @@ function habitatTabValue(id: number): string {
return `habitat-${id}`;
}
function activePokemonRouteId(): string | null {
return typeof route.name === 'string' &&
pokemonDetailRouteNames.has(route.name) &&
typeof route.params.id === 'string' &&
route.params.id.trim() !== ''
? route.params.id
: null;
}
function timeLabel(value: string): string {
const labels: Record<string, string> = {
早晨: t('appearance.morning'),
@@ -439,8 +454,14 @@ async function saveTradingItems() {
}
async function loadPokemonDetail() {
const routeId = activePokemonRouteId();
if (!routeId) {
initialPokemonLoaded.value = true;
return;
}
try {
const nextPokemon = await api.pokemonDetail(String(route.params.id));
const nextPokemon = await api.pokemonDetail(routeId);
pokemon.value = nextPokemon;
relatedHabitatTab.value = habitatTabValue(nextPokemon.environment.id);
initialPokemonLoaded.value = true;
@@ -461,13 +482,12 @@ async function loadPokemonDetail() {
}
onMounted(async () => {
if (getAuthToken()) {
try {
currentUser.value = (await api.me()).user;
} catch {
currentUser.value = null;
}
try {
currentUser.value = (await api.me()).user;
} catch {
currentUser.value = null;
}
if (!initialPokemonLoaded.value) {
await loadPokemonDetail();
}
@@ -485,6 +505,10 @@ watch(
watch(
() => route.params.id,
() => {
if (!activePokemonRouteId()) {
return;
}
pokemon.value = null;
relatedHabitatTab.value = '';
detailTab.value = 'details';

6
frontend/src/views/PokemonEdit.vue
View File

@@ -14,7 +14,6 @@ import TranslationFields from '../components/TranslationFields.vue';
import { iconCancel, iconSave, iconSearch } from '../icons';
import {
api,
getAuthToken,
type AuthUser,
type ConfigType,
type EntityImage,
@@ -195,11 +194,6 @@ async function loadOptions() {
}
async function loadCurrentUser() {
if (!getAuthToken()) {
currentUser.value = null;
return;
}
try {
currentUser.value = (await api.me()).user;
} catch {