Repository: AlesInfiny/maia
Pull request #2189: authentication-guardのチェック対象のパス指定方法をvue-router公式の実装に沿うよう修正
Author: login: kenjiyoshid-a
Labels: name: target: Dressca
description: サンプルアプリケーションDresscaに関係がある
Created: 2025-03-31T07:24:34Z | Merged: 2025-04-03T04:42:08Z

## この Pull request で実施したこと

authentication-guardのパス指定方法をvue-router公式の実装に沿うよう修正しました。実装は以下を参照しました。
- https://router.vuejs.org/guide/advanced/meta.html#Route-Meta-Fields

### consumer（サンプルアプリケーション）
- vue-routerのルーティング定義のmeta属性に認証チェックが必要かどうかの真理値requiresAuthプロパティを追加
- authentication-guardをrequiresAuthを利用して認証チェックが必要かどうか確かめる実装に変更

### admin（管理者用サンプルアプリケーション）
- vue-routerのルーティング定義のmeta属性に認証チェックが必要かどうかの真理値requiresAuthプロパティを追加
- authentication-guardをrequiresAuthを利用して認証チェックが必要かどうか確かめる実装に変更

## この Pull request では実施していないこと

同時並行で対応した、不要なルーティング定義の削除は本PRでは行っていません。
以下のPRを先にレビュいただきたいです。
- #2186 

## Issues や Discussions 、関連する Web サイトなどへのリンク

- #2134 


Diff:
diff --git a/samples/web-csr/dressca-frontend/admin/src/router/authentication/authentication.ts b/samples/web-csr/dressca-frontend/admin/src/router/authentication/authentication.ts
index 8a2fc76b3..4bcf7e388 100644
--- a/samples/web-csr/dressca-frontend/admin/src/router/authentication/authentication.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/router/authentication/authentication.ts
@@ -8,5 +8,6 @@ export const authenticationRoutes: RouteRecordRaw[] = [
     path: '/authentication/login',
     name: 'authentication/login',
     component: () => import('@/views/authentication/LoginView.vue'),
+    meta: { requiresAuth: false },
   },
 ];
diff --git a/samples/web-csr/dressca-frontend/admin/src/router/catalog/catalog.ts b/samples/web-csr/dressca-frontend/admin/src/router/catalog/catalog.ts
index 3da0bbb33..f9fab367e 100644
--- a/samples/web-csr/dressca-frontend/admin/src/router/catalog/catalog.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/router/catalog/catalog.ts
@@ -8,15 +8,18 @@ export const catalogRoutes: RouteRecordRaw[] = [
     path: '/catalog/items',
     name: 'catalog/items',
     component: () => import('@/views/catalog/ItemsView.vue'),
+    meta: { requiresAuth: true },
   },
   {
     path: '/catalog/items/edit/:itemId',
     name: 'catalog/items/edit',
     component: () => import('@/views/catalog/ItemsEditView.vue'),
+    meta: { requiresAuth: true },
   },
   {
     path: '/catalog/items/add',
     name: 'catalog/items/add',
     component: () => import('@/views/catalog/ItemsAddView.vue'),
+    meta: { requiresAuth: true },
   },
 ];
diff --git a/samples/web-csr/dressca-frontend/admin/src/router/error/error.ts b/samples/web-csr/dressca-frontend/admin/src/router/error/error.ts
index 60f54c908..ec1e95886 100644
--- a/samples/web-csr/dressca-frontend/admin/src/router/error/error.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/router/error/error.ts
@@ -8,5 +8,6 @@ export const errorRoutes: RouteRecordRaw[] = [
     path: '/error',
     name: 'error',
     component: () => import('@/views/error/ErrorView.vue'),
+    meta: { requiresAuth: false },
   },
 ];
diff --git a/samples/web-csr/dressca-frontend/admin/src/router/home/home.ts b/samples/web-csr/dressca-frontend/admin/src/router/home/home.ts
index 7394ee13a..46c13d93e 100644
--- a/samples/web-csr/dressca-frontend/admin/src/router/home/home.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/router/home/home.ts
@@ -8,5 +8,6 @@ export const homeRoutes: RouteRecordRaw[] = [
     path: '/',
     name: 'home',
     component: () => import('@/views/home/HomeView.vue'),
+    meta: { requiresAuth: true },
   },
 ];
diff --git a/samples/web-csr/dressca-frontend/admin/src/shared/authentication/authentication-guard.ts b/samples/web-csr/dressca-frontend/admin/src/shared/authentication/authentication-guard.ts
index 7fdf89f75..dc51d19f2 100644
--- a/samples/web-csr/dressca-frontend/admin/src/shared/authentication/authentication-guard.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/shared/authentication/authentication-guard.ts
@@ -1,4 +1,4 @@
-import type { Router, RouteRecordName } from 'vue-router';
+import type { Router } from 'vue-router';
 import { useAuthenticationStore } from '@/stores/authentication/authentication';
 import { useRoutingStore } from '@/stores/routing/routing';
 
@@ -12,20 +12,13 @@ export const authenticationGuard = (router: Router) => {
   router.beforeEach((to) => {
     const authenticationStore = useAuthenticationStore();
     const routingStore = useRoutingStore();
-    const ignoreAuthPaths: (RouteRecordName | null | undefined)[] = [
-      'authentication/login',
-      'error',
-    ];
-    if (ignoreAuthPaths.includes(to.name)) {
-      return true;
-    }
 
-    if (authenticationStore.isAuthenticated) {
-      return true;
+    if (to.meta.requiresAuth && !authenticationStore.isAuthenticated) {
+      const redirectFromPath: string = to.fullPath;
+      routingStore.setRedirectFrom(redirectFromPath);
+      return { name: 'authentication/login' };
     }
 
-    const redirectFromPath: string = to.fullPath;
-    routingStore.setRedirectFrom(redirectFromPath);
-    return { name: 'authentication/login' };
+    return true;
   });
 };
diff --git a/samples/web-csr/dressca-frontend/consumer/src/router/authentication/authentication.ts b/samples/web-csr/dressca-frontend/consumer/src/router/authentication/authentication.ts
index c3eb5b2d8..60435225f 100644
--- a/samples/web-csr/dressca-frontend/consumer/src/router/authentication/authentication.ts
+++ b/samples/web-csr/dressca-frontend/consumer/src/router/authentication/authentication.ts
@@ -5,5 +5,6 @@ export const authenticationRoutes: RouteRecordRaw[] = [
     path: '/authentication/login',
     name: 'authentication/login',
     component: () => import('@/views/authentication/LoginView.vue'),
+    meta: { requiresAuth: false },
   },
 ];
diff --git a/samples/web-csr/dressca-frontend/consumer/src/router/basket/basket.ts b/samples/web-csr/dressca-frontend/consumer/src/router/basket/basket.ts
index 330ef3c95..446e3a027 100644
--- a/samples/web-csr/dressca-frontend/consumer/src/router/basket/basket.ts
+++ b/samples/web-csr/dressca-frontend/consumer/src/router/basket/basket.ts
@@ -5,5 +5,6 @@ export const basketRoutes: RouteRecordRaw[] = [
     path: '/basket',
     name: 'basket',
     component: () => import('@/views/basket/BasketView.vue'),
+    meta: { requiresAuth: false },
   },
 ];
diff --git a/samples/web-csr/dressca-frontend/consumer/src/router/catalog/catalog.ts b/samples/web-csr/dressca-frontend/consumer/src/router/catalog/catalog.ts
index 39ca712f0..ce36bb402 100644
--- a/samples/web-csr/dressca-frontend/consumer/src/router/catalog/catalog.ts
+++ b/samples/web-csr/dressca-frontend/consumer/src/router/catalog/catalog.ts
@@ -5,5 +5,6 @@ export const catalogRoutes: RouteRecordRaw[] = [
     path: '/',
     name: 'catalog',
     component: () => import('@/views/catalog/CatalogView.vue'),
+    meta: { requiresAuth: false },
   },
 ];
diff --git a/samples/web-csr/dressca-frontend/consumer/src/router/error/error.ts b/samples/web-csr/dressca-frontend/consumer/src/router/error/error.ts
index 2e8fce497..4de399c63 100644
--- a/samples/web-csr/dressca-frontend/consumer/src/router/error/error.ts
+++ b/samples/web-csr/dressca-frontend/consumer/src/router/error/error.ts
@@ -5,5 +5,6 @@ export const errorRoutes: RouteRecordRaw[] = [
     path: '/error',
     name: 'error',
     component: () => import('@/views/error/ErrorView.vue'),
+    meta: { requiresAuth: false },
   },
 ];
diff --git a/samples/web-csr/dressca-frontend/consumer/src/router/ordering/ordering.ts b/samples/web-csr/dressca-frontend/consumer/src/router/ordering/ordering.ts
index 0c1e5e48d..eff5b7146 100644
--- a/samples/web-csr/dressca-frontend/consumer/src/router/ordering/ordering.ts
+++ b/samples/web-csr/dressca-frontend/consumer/src/router/ordering/ordering.ts
@@ -5,11 +5,13 @@ export const orderingRoutes: RouteRecordRaw[] = [
     path: '/ordering/checkout',
     name: 'ordering/checkout',
     component: () => import('@/views/ordering/CheckoutView.vue'),
+    meta: { requiresAuth: true },
   },
   {
     path: '/ordering/done/:orderId(\\d+)',
     name: 'ordering/done',
     component: () => import('@/views/ordering/DoneView.vue'),
+    meta: { requiresAuth: true },
     props: (route) => ({
       orderId: Number(route.params.orderId),
     }),
diff --git a/samples/web-csr/dressca-frontend/consumer/src/shared/authentication/authentication-guard.ts b/samples/web-csr/dressca-frontend/consumer/src/shared/authentication/authentication-guard.ts
index 490484050..b523a1e17 100644
--- a/samples/web-csr/dressca-frontend/consumer/src/shared/authentication/authentication-guard.ts
+++ b/samples/web-csr/dressca-frontend/consumer/src/shared/authentication/authentication-guard.ts
@@ -6,15 +6,6 @@ export const authenticationGuard = (router: Router) => {
   router.beforeEach((to, from) => {
     const authenticationStore = useAuthenticationStore();
     const routingStore = useRoutingStore();
-    const ignoreAuthPaths: (RouteRecordName | null | undefined)[] = [
-      'authentication/login',
-      'catalog',
-      'basket',
-      'error',
-    ];
-    if (ignoreAuthPaths.includes(to.name)) {
-      return true;
-    }
 
     const orderingPaths: (RouteRecordName | null | undefined)[] = [
       'ordering/checkout',
@@ -24,12 +15,12 @@ export const authenticationGuard = (router: Router) => {
       return { name: 'catalog' };
     }
 
-    if (authenticationStore.isAuthenticated) {
-      return true;
+    if (to.meta.requiresAuth && !authenticationStore.isAuthenticated) {
+      const redirectFromPath: string = to.name?.toString() ?? '';
+      routingStore.setRedirectFrom(redirectFromPath);
+      return { name: 'authentication/login' };
     }
 
-    const redirectFromPath: string = to.name?.toString() ?? '';
-    routingStore.setRedirectFrom(redirectFromPath);
-    return { name: 'authentication/login' };
+    return true;
   });
 };


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR updates the authentication guard to align with the vue-router official implementation by leveraging the meta.requiresAuth field instead of hard-coded route names.  
- Updated authentication guard logic in both consumer and admin apps to check meta.requiresAuth.  
- Removed the static list of ignored authentication paths.  
- Added meta configuration to route definitions across consumer and admin routers.

### Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.

<details>
<summary>Show a summary per file</summary>

| File | Description |
| ---- | ----------- |
| consumer/src/shared/authentication/authentication-guard.ts | Removed ignoreAuthPaths and switched to meta.requiresAuth for auth check. |
| consumer/src/router/ordering/ordering.ts | Added meta.requiresAuth to ordering routes; duplicate route names detected. |
| consumer/src/router/error/error.ts | Added meta.requiresAuth property to the error route. |
| consumer/src/router/catalog/catalog.ts | Added meta.requiresAuth property to the catalog route. |
| consumer/src/router/basket/basket.ts | Added meta.requiresAuth property to the basket route. |
| consumer/src/router/authentication/authentication.ts | Added meta.requiresAuth property to the authentication route. |
| admin/src/shared/authentication/authentication-guard.ts | Updated the guard to use meta.requiresAuth; removed unused imports. |
| admin/src/router/home/home.ts | Added meta.requiresAuth property to the home route. |
| admin/src/router/error/error.ts | Added meta.requiresAuth property to the error route. |
| admin/src/router/catalog/catalog.ts | Added meta.requiresAuth property to multiple catalog routes. |
| admin/src/router/authentication/authentication.ts | Added meta.requiresAuth property to the authentication route. |
</details>



<details>
<summary>Comments suppressed due to low confidence (1)</summary>

**samples/web-csr/dressca-frontend/consumer/src/router/ordering/ordering.ts:17**
* The route named 'ordering/done' appears more than once, which can lead to routing conflicts. Consider renaming one of the routes to ensure each route has a unique name.
```
name: 'ordering/done',
```
</details>


state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-01T09:31:57Z
user: login: kenjiyoshid-a
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T01:20:12Z
user: login: KentaHizume
body: consumer、adminの両方において、
改修後も想定通りグローバルガードが働いていることを確認しました。
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-03T04:41:49Z

Review comments:
diff_hunk: @@ -24,12 +15,12 @@ export const authenticationGuard = (router: Router) => {
       return { name: 'catalog' };
     }
 
-    if (authenticationStore.isAuthenticated) {
-      return true;
+    if (to.meta.requiresAuth && !authenticationStore.isAuthenticated) {
+      const redirectFromPath: string = to.name?.toString() ?? '';
path: samples/web-csr/dressca-frontend/consumer/src/shared/authentication/authentication-guard.ts
user: login: Copilot
body: The consumer authentication guard computes the redirect path using 'to.name?.toString()', whereas the admin guard uses 'to.fullPath'. For consistency and to handle unnamed routes robustly, consider using the same property in both guards (for example, 'to.fullPath').
```suggestion
      const redirectFromPath: string = to.fullPath;
```
created_at: 2025-04-01T09:31:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -24,12 +15,12 @@ export const authenticationGuard = (router: Router) => {
       return { name: 'catalog' };
     }
 
-    if (authenticationStore.isAuthenticated) {
-      return true;
+    if (to.meta.requiresAuth && !authenticationStore.isAuthenticated) {
+      const redirectFromPath: string = to.name?.toString() ?? '';
path: samples/web-csr/dressca-frontend/consumer/src/shared/authentication/authentication-guard.ts
user: login: kenjiyoshid-a
body: 以前より、consumerアプリでパラメータを含む動的ルートからリダイレクトしてログインした場合に想定通りの場所に遷移できない事象が発生しています。本事象は下記Issueで対応予定です。
- #1902 
created_at: 2025-04-03T01:20:11Z
author_association: CONTRIBUTOR

PR comments:
user: login: KentaHizume
created_at: 2025-04-03T02:57:04Z
body: @kenjiyoshid-a 
お手数ですがコンフリクトの解決をお願いします！
author_association: CONTRIBUTOR
user: login: kenjiyoshid-a
created_at: 2025-04-03T03:00:33Z
body: @KentaHizume 
コンフリクトを解決しました！
author_association: CONTRIBUTOR