當前端開始思考後端架構第四篇：前端權限架構的初步規劃

{
  "user_id": "user123",
  "role": "operation_manager",
  "permissions": [
    {
      "resource": "order",
      "actions": ["view", "delete"],
      "scope": ["taipei", "newTaipei"]
    }
  ]
}

const { user } = useAuthStore();
 
const canDelete = 
  user.role === "operation_manager" && ["taipei", "newTaipei"].includes(order.store);
 
return (
  <div>
    <div>訂單詳情...</div>
    {canDelete && <button>刪除</button>}
  </div>
)

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── services/
│   │   ├── repositories/
│   │   └── entities/
│   └── order/
│       ├── components/
│       ├── services/
│       ├── repositories/
│       └── entities/
└── shared/
    ├── components/
    └── utils/

src/
├── features/
│   ├── auth/
│   │   ├── repositories/
│   │   │   └── AuthRepository.ts
│   │   └── mappers/
│   │       └── PermissionMapper.ts
│   └── order/
│       └── components/
│           └── OrderPage.vue
└── shared/
    ├── entities/
    │   └── Permission.ts        ← 共用的 Entity
    └── services/
        └── PermissionService.ts ← 共用的 Service

// shared/entities/Permission.ts
 
export interface Permission {
  resource: string
  actions: string[]
  scope: string[] | "all"
}
 
export interface UserPermission {
  userId: string
  role: string
  permissions: Permission[]
}

// features/auth/mappers/PermissionMapper.ts
const toPermissions = (p:any) => ({
  resource: p.resource,
  actions: p.actions,
  scope: p.scope
})
 
const toDomainData = (apiResponse: any): UserPermission => ({
  userId: apiResponse.user_id,
  role: apiResponse.role,
  permissions: apiResponse.permissions.map(toPermissions) 
  // .map() 裡面只做一件事，若只是「把收到的東西，原封不動直接轉交給下一個函式」，可以省略中間的過程，完整的過程如下
  // apiResponse.permissions.map((item) => toPermission(item))
})
 
export { toDomainData }

{
  "user_id": "12345",
  "role": "admin",
  "created_at": "2026-03-16",
  "permissions": [
    {
      "resource": "article",
      "actions": ["create", "read"],
      "scope": "global",
      "extra_data_we_dont_need": "xyz" 
    }
  ]
}

{
  "userId": "12345",
  "role": "admin",
  "permissons": [
    {
      "resource": "article",
      "actions": ["create", "read"],
      "scope": "global"
    }
  ]
}

// features/auth/repositories/AuthRepository.ts
 
import { toDomainData } from '../mappers/PermissionMapper'
 
const createAuthRepository = (httpClient: typeof fetch) => {
  return {
    getMe: async(): Promise<UserPermission> => {
      const res = await httpClient('/api/me')
      const apiData = await res.json()
 
      return toDomainData(apiData)
    }
  }
}
 
export { createAuthRepository }

// shared/services/PermissionService.ts
 
const createPermissionService = (userPermission: UserPermission) => {
  return {
    hasPermission: (action: string, resource: string, scope?: string): boolean => {
      const permission = userPermission.permissions
        .find((p) => p.resource === resource)
 
      if (!permission) return false
 
      const isActionAllowed = permission.actions.includes(action)
      const isWithinScope =
        permission.scope === "all" ||
        (scope ? permission.scope.includes(scope) : true)
 
      return isActionAllowed && isWithinScope
    }
  }
}
 
export { createPermissionService }

import { useEffect, useState } from 'react'
import { createAuthRepository } from 'auth/repositories/AuthRepository'
import { createOrderRepository } from 'order/repository/OrderRepository'
import { createPermissionService } from '../services/PermissionService'
import { OrderDetail } from './OrderDetail'
 
const authRepo = createAuthRepository(window.fetch)
// 雖然上面沒有寫，但訂單相關的 API，做法一樣，建立一個 Repository 去管理
const orderRepo = creatOrderRepository(window.fetch)
 
 
export default function OrderPage({ orderId }: { orderId: number }) {
  const [permissionService, setPermissionService] = useState(null)
  const [myOrder, setMyOrder] = useState(null)
 
  useEffect(() => {
    const init = async() => {
      try {
        const [authData, orderData] = await Promise.all([
          authRepo.getMe(),
          orderRepo.getOrderById(orderId)
        ])
 
        setPermissionService(createPermissionService(authData));
        setMyOrder(orderData);
      } catch (error) {
        console.error(error.message)
      }
    }
    init()
  }, [])
 
  if (!permissionService) {
    return (
      <div>載入中...</div>
    )
  }
 
  return (
    <OrderDetail order={myOrder} permissionService={permissionService} />
  )
}