fix: 非ログイン時にクレデンシャルが必要なページに行くとエラーが出る問題を修正 (#10973)

* 非ログイン時にクレデンシャルが必要なページに行くとエラーが出る問題を修正 (misskey-dev/misskey#10922)

* Update CHANGELOG.md

* fix

* Update CHANGELOG.md

* Update CHANGELOG.md

CHANGELOG.md

@@ -20,6 +20,7 @@
 
 ### Client
 - Fix: サーバーメトリクスが90度傾いている
+- Fix: 非ログイン時にクレデンシャルが必要なページに行くとエラーが出る問題を修正
 - Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正
 - Fix: ZenUIでポップアップの表示位置がおかしい問題を修正
 - deck UIのカラムのメニューからアンテナとリストの編集画面を開けるように

packages/frontend/src/components/MkPageWindow.vue

@@ -30,7 +30,8 @@ import MkWindow from '@/components/MkWindow.vue';
 import { popout as _popout } from '@/scripts/popout';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { url } from '@/config';
-import { mainRouter, routes } from '@/router';
+import { mainRouter, routes, page } from '@/router';
+import { $i } from '@/account';
 import { Router } from '@/nirax';
 import { i18n } from '@/i18n';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
@@ -45,7 +46,7 @@ defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const router = new Router(routes, props.initialPath);
+const router = new Router(routes, props.initialPath, !!$i, page(() => import('@/pages/not-found.vue')));
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 let windowEl = $shallowRef<InstanceType<typeof MkWindow>>();

packages/frontend/src/nirax.ts

@@ -2,7 +2,6 @@
 
 import { EventEmitter } from 'eventemitter3';
 import { Component, shallowRef, ShallowRef } from 'vue';
-import { pleaseLogin } from '@/scripts/please-login';
 import { safeURIDecode } from '@/scripts/safe-uri-decode';
 
 type RouteDef = {
@@ -23,7 +22,7 @@ type ParsedPath = (string | {
 	optional?: boolean;
 })[];
 
-export type Resolved = { route: RouteDef; props: Map<string, string>; child?: Resolved; };
+export type Resolved = { route: RouteDef; props: Map<string, string | boolean>; child?: Resolved; };
 
 function parsePath(path: string): ParsedPath {
 	const res = [] as ParsedPath;
@@ -75,15 +74,19 @@ export class Router extends EventEmitter<{
 	public currentRef: ShallowRef<Resolved> = shallowRef();
 	public currentRoute: ShallowRef<RouteDef> = shallowRef();
 	private currentPath: string;
+	private isLoggedIn: boolean;
+	private notFoundPageComponent: Component;
 	private currentKey = Date.now().toString();
 
 	public navHook: ((path: string, flag?: any) => boolean) | null = null;
 
-	constructor(routes: Router['routes'], currentPath: Router['currentPath']) {
+	constructor(routes: Router['routes'], currentPath: Router['currentPath'], isLoggedIn: boolean, notFoundPageComponent: Component) {
 		super();
 
 		this.routes = routes;
 		this.currentPath = currentPath;
+		this.isLoggedIn = isLoggedIn;
+		this.notFoundPageComponent = notFoundPageComponent;
 		this.navigate(currentPath, null, false);
 	}
 
@@ -212,8 +215,9 @@ export class Router extends EventEmitter<{
 			throw new Error('no route found for: ' + path);
 		}
 
-		if (res.route.loginRequired) {
-			pleaseLogin('/');
+		if (res.route.loginRequired && !this.isLoggedIn) {
+			res.route.component = this.notFoundPageComponent;
+			res.props.set('showLoginPopup', true);
 		}
 
 		const isSamePath = beforePath === path;

packages/frontend/src/pages/not-found.vue

@@ -10,8 +10,17 @@
 <script lang="ts" setup>
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { pleaseLogin } from '@/scripts/please-login';
 import { notFoundImageUrl } from '@/instance';
 
+const props = defineProps<{
+	showLoginPopup?: boolean;
+}>();
+
+if (props.showLoginPopup) {
+	pleaseLogin('/');
+}
+
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);

packages/frontend/src/router.ts

@@ -4,7 +4,7 @@ import { $i, iAmModerator } from '@/account';
 import MkLoading from '@/pages/_loading_.vue';
 import MkError from '@/pages/_error_.vue';
 
-const page = (loader: AsyncComponentLoader<any>) => defineAsyncComponent({
+export const page = (loader: AsyncComponentLoader<any>) => defineAsyncComponent({
 	loader: loader,
 	loadingComponent: MkLoading,
 	errorComponent: MkError,
@@ -505,7 +505,7 @@ export const routes = [{
 	component: page(() => import('./pages/not-found.vue')),
 }];
 
-export const mainRouter = new Router(routes, location.pathname + location.search + location.hash);
+export const mainRouter = new Router(routes, location.pathname + location.search + location.hash, !!$i, page(() => import('@/pages/not-found.vue')));
 
 window.history.replaceState({ key: mainRouter.getCurrentKey() }, '', location.href);