Split Auth & Permission meta guards

Author: lcharette

packages/sprinkle-account/app/assets/guards/authGuard.ts

@@ -12,6 +12,13 @@ export function useAuthGuard(router: Router) {
         return router.currentRoute.value.meta.auth ?? null
     }
 
+    /**
+     * Return the auth RouteGuard
+     */
+    const getRoutePermission = () => {
+        return router.currentRoute.value.meta.permission ?? null
+    }
+
     /**
      * Return the guest RouteGuard
      */
@@ -34,9 +41,9 @@ export function useAuthGuard(router: Router) {
      * Apply permission route guard
      */
     const applyPermissionGuard = () => {
-        const authGuard = getRouteAuth()
-        if (authGuard?.permission !== undefined && !auth.checkAccess(authGuard.permission)) {
-            const redirectTo = authGuard.redirect ?? getErrorRoute('Forbidden')
+        const permissionGuard = getRoutePermission()
+        if (permissionGuard?.slug !== undefined && !auth.checkAccess(permissionGuard.slug)) {
+            const redirectTo = permissionGuard.redirect ?? getErrorRoute('Forbidden')
             redirect(redirectTo)
         }
     }

packages/sprinkle-account/app/assets/interfaces/index.ts

@@ -2,7 +2,7 @@ export type { UserInterface } from './models/userInterface'
 export type { GroupInterface } from './models/groupInterface'
 export type { RoleInterface } from './models/roleInterface'
 export type { PermissionInterface, UserPermissionsMapInterface } from './models/permissionInterface'
-export type { RouteAuthGuard, RouteGuestGuard } from './routes'
+export type { RouteGuard, RoutePermissionGuard } from './routes'
 export type { AuthCheckResponse } from './AuthCheckApi'
 export type { ProfileEditRequest } from './ProfileEditApi'
 export type { PasswordEditRequest } from './PasswordEditApi'

packages/sprinkle-account/app/assets/interfaces/routes.ts

@@ -9,18 +9,18 @@
  */
 import 'vue-router'
 
-export interface RouteAuthGuard {
+export interface RouteGuard {
     redirect?: string | { name: string }
-    permission?: string
 }
 
-export interface RouteGuestGuard {
-    redirect?: string | { name: string }
+export interface RoutePermissionGuard extends RouteGuard {
+    slug: string
 }
 
 declare module 'vue-router' {
     interface RouteMeta {
-        auth?: RouteAuthGuard
-        guest?: RouteGuestGuard
+        auth?: RouteGuard
+        guest?: RouteGuard
+        permission?: RoutePermissionGuard
     }
 }

packages/sprinkle-account/app/assets/tests/guards/authGuard.test.ts

@@ -2,7 +2,7 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { useAuthGuard } from '../../guards/authGuard'
 import * as Auth from '../../stores/auth'
-import type { RouteAuthGuard, RouteGuestGuard } from 'app/assets/interfaces'
+import type { RouteGuard, RoutePermissionGuard } from 'app/assets/interfaces'
 
 // Default mock for the auth store and router
 const mockAuthStore = {
@@ -15,8 +15,9 @@ const mockRouter = {
         value: {
             path: '/foo/bar',
             meta: {
-                auth: undefined as RouteAuthGuard | undefined,
-                guest: undefined as RouteGuestGuard | undefined
+                auth: undefined as RouteGuard | undefined,
+                guest: undefined as RouteGuard | undefined,
+                permission: undefined as RoutePermissionGuard | undefined
             }
         }
     },
@@ -45,6 +46,8 @@ describe('authGuard useAuthGuard() method', () => {
     test('should redirect to login if route requires auth and user is not authenticated', () => {
         // Arrange
         mockRouter.currentRoute.value.meta.auth = { redirect: '/login' }
+        mockRouter.currentRoute.value.meta.permission = undefined
+        mockRouter.currentRoute.value.meta.guest = undefined
         mockAuthStore.isAuthenticated = false
 
         // Act
@@ -58,6 +61,8 @@ describe('authGuard useAuthGuard() method', () => {
     test('should not redirect if route requires auth and user is authenticated', () => {
         // Arrange
         mockRouter.currentRoute.value.meta.auth = { redirect: '/login' }
+        mockRouter.currentRoute.value.meta.permission = undefined
+        mockRouter.currentRoute.value.meta.guest = undefined
         mockAuthStore.isAuthenticated = true
 
         // Act
@@ -69,7 +74,9 @@ describe('authGuard useAuthGuard() method', () => {
 
     test('should not redirect if route requires permission and user does not have it', () => {
         // Arrange
-        mockRouter.currentRoute.value.meta.auth = { permission: 'foo.bar', redirect: '/login' }
+        mockRouter.currentRoute.value.meta.auth = undefined
+        mockRouter.currentRoute.value.meta.permission = { slug: 'foo.bar', redirect: '/login' }
+        mockRouter.currentRoute.value.meta.guest = undefined
         mockAuthStore.isAuthenticated = true
 
         // Act
@@ -82,6 +89,7 @@ describe('authGuard useAuthGuard() method', () => {
     test('should not redirect if route requires guests and user is not authenticated', () => {
         // Arrange
         mockRouter.currentRoute.value.meta.auth = undefined
+        mockRouter.currentRoute.value.meta.permission = undefined
         mockRouter.currentRoute.value.meta.guest = { redirect: '/' }
         mockAuthStore.isAuthenticated = false
 
@@ -94,6 +102,8 @@ describe('authGuard useAuthGuard() method', () => {
 
     test('should redirect to home if route is for guests and user is authenticated', () => {
         // Arrange
+        mockRouter.currentRoute.value.meta.auth = undefined
+        mockRouter.currentRoute.value.meta.permission = undefined
         mockRouter.currentRoute.value.meta.guest = { redirect: '/' }
         mockAuthStore.isAuthenticated = true
 
@@ -107,6 +117,8 @@ describe('authGuard useAuthGuard() method', () => {
     test('should use default redirect for auth guard if no redirect specified', () => {
         // Arrange
         mockRouter.currentRoute.value.meta.auth = {}
+        mockRouter.currentRoute.value.meta.permission = undefined
+        mockRouter.currentRoute.value.meta.guest = undefined
         mockAuthStore.isAuthenticated = false
 
         // Act
@@ -122,7 +134,9 @@ describe('authGuard useAuthGuard() method', () => {
 
     test('should use default redirect for permission guard if no redirect specified', () => {
         // Arrange
-        mockRouter.currentRoute.value.meta.auth = { permission: 'foo.bar' }
+        mockRouter.currentRoute.value.meta.auth = undefined
+        mockRouter.currentRoute.value.meta.permission = { slug: 'foo.bar' }
+        mockRouter.currentRoute.value.meta.guest = undefined
         mockAuthStore.isAuthenticated = false
 
         // Act
@@ -131,13 +145,15 @@ describe('authGuard useAuthGuard() method', () => {
         // Assert
         expect(mockRouter.replace).toHaveBeenCalledWith(
             expect.objectContaining({
-                name: 'Unauthorized'
+                name: 'Forbidden'
             })
         )
     })
 
     test('should use default redirect for guest guard if no redirect specified', () => {
         // Arrange
+        mockRouter.currentRoute.value.meta.auth = undefined
+        mockRouter.currentRoute.value.meta.permission = undefined
         mockRouter.currentRoute.value.meta.guest = {}
         mockAuthStore.isAuthenticated = true