Add plugin, router AuthGuard

app/assets/guards/authGuard.ts

@@ -0,0 +1,55 @@
+import { watchEffect } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import type { Router } from 'vue-router'
+
+export function useAuthGuard(router: Router) {
+    const auth = useAuthStore()
+
+    /**
+     * Return the auth RouteGuard
+     */
+    const getRouteAuth = () => {
+        return router.currentRoute.value.meta.auth ?? null
+    }
+
+    /**
+     * Return the guest RouteGuard
+     */
+    const getRouteGuest = () => {
+        return router.currentRoute.value.meta.guest ?? null
+    }
+
+    /**
+     * Apply auth route guard
+     */
+    const applyAuthGuard = () => {
+        const authGuard = getRouteAuth()
+        if (authGuard !== null && !auth.isAuthenticated) {
+            const redirectTo = authGuard.redirect ?? '/login'
+            redirect(redirectTo)
+        }
+    }
+
+    /**
+     * Apply guest route guard
+     */
+    const applyGuestGuard = () => {
+        const guestGuard = getRouteGuest()
+        if (guestGuard !== null && auth.isAuthenticated) {
+            const redirectTo = guestGuard.redirect ?? '/'
+            redirect(redirectTo)
+        }
+    }
+
+    /**
+     * Redirect to the specified route
+     */
+    const redirect = (redirectTo: string | { name: string }) => {
+        router.push(redirectTo)
+    }
+
+    watchEffect(() => {
+        applyAuthGuard()
+        applyGuestGuard()
+    })
+}

app/assets/interfaces/index.ts

@@ -1,5 +1,6 @@
 import type { LoginForm } from './loginForm'
 import type { UserInterface } from './userInterface'
 import { type AlertInterface, AlertStyle } from './alerts'
+import type { RouteGuard } from './routes'
 
-export { type LoginForm, type UserInterface, type AlertInterface, AlertStyle }
+export { type LoginForm, type UserInterface, type AlertInterface, type RouteGuard, AlertStyle }

app/assets/interfaces/routes.ts

@@ -0,0 +1,12 @@
+import 'vue-router'
+
+export interface RouteGuard {
+    redirect: string | { name: string }
+}
+
+declare module 'vue-router' {
+    interface RouteMeta {
+        auth?: RouteGuard
+        guest?: RouteGuard
+    }
+}

app/assets/plugin.ts

@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+import { useAuthStore } from './stores/auth'
+import { useAuthGuard } from './guards/authGuard'
+import type { Router } from 'vue-router'
+
+/* Install plugins */
+export default {
+    install: (app: App, options: { router: Router }) => {
+        // Run auth check on load
+        const auth = useAuthStore()
+        auth.check()
+
+        // Setup router guards
+        const { router } = options
+        useAuthGuard(router)
+    }
+}

dist/guards.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),l=require("./stores.cjs");function d(e){const r=l.useAuthStore(),c=()=>e.currentRoute.value.meta.auth??null,s=()=>e.currentRoute.value.meta.guest??null,o=()=>{const t=c();if(t!==null&&!r.isAuthenticated){const u=t.redirect??"/login";n(u)}},a=()=>{const t=s();if(t!==null&&r.isAuthenticated){const u=t.redirect??"/";n(u)}},n=t=>{e.push(t)};i.watchEffect(()=>{o(),a()})}exports.useAuthGuard=d;

dist/guards.js

@@ -0,0 +1,25 @@
+import { watchEffect as i } from "vue";
+import { useAuthStore as l } from "./stores.js";
+function p(e) {
+  const r = l(), c = () => e.currentRoute.value.meta.auth ?? null, o = () => e.currentRoute.value.meta.guest ?? null, s = () => {
+    const t = c();
+    if (t !== null && !r.isAuthenticated) {
+      const u = t.redirect ?? "/login";
+      n(u);
+    }
+  }, a = () => {
+    const t = o();
+    if (t !== null && r.isAuthenticated) {
+      const u = t.redirect ?? "/";
+      n(u);
+    }
+  }, n = (t) => {
+    e.push(t);
+  };
+  i(() => {
+    s(), a();
+  });
+}
+export {
+  p as useAuthGuard
+};

dist/guards/authGuard.d.ts

@@ -0,0 +1,3 @@
+import { Router } from 'vue-router';
+
+export declare function useAuthGuard(router: Router): void;

dist/interfaces/index.d.ts

@@ -1,5 +1,6 @@
 import { LoginForm } from './loginForm';
 import { UserInterface } from './userInterface';
 import { AlertInterface, AlertStyle } from './alerts';
+import { RouteGuard } from './routes';
 
-export { type LoginForm, type UserInterface, type AlertInterface, AlertStyle };
+export { type LoginForm, type UserInterface, type AlertInterface, type RouteGuard, AlertStyle };

dist/interfaces/routes.d.ts

@@ -0,0 +1,12 @@
+
+export interface RouteGuard {
+    redirect: string | {
+        name: string;
+    };
+}
+declare module 'vue-router' {
+    interface RouteMeta {
+        auth?: RouteGuard;
+        guest?: RouteGuard;
+    }
+}

dist/plugin.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./stores.cjs"),r=require("./guards.cjs"),s={install:(o,e)=>{u.useAuthStore().check();const{router:t}=e;r.useAuthGuard(t)}};exports.default=s;

dist/plugin.d.ts

@@ -0,0 +1,9 @@
+import { App } from 'vue';
+import { Router } from 'vue-router';
+
+declare const _default: {
+    install: (app: App, options: {
+        router: Router;
+    }) => void;
+};
+export default _default;

dist/plugin.js

@@ -0,0 +1,12 @@
+import { useAuthStore as u } from "./stores.js";
+import { useAuthGuard as r } from "./guards.js";
+const c = {
+  install: (a, t) => {
+    u().check();
+    const { router: o } = t;
+    r(o);
+  }
+};
+export {
+  c as default
+};

package.json

@@ -24,6 +24,11 @@
         "url": "https://github.com/userfrosting/UserFrosting/issues"
     },
     "exports": {
+        ".": {
+            "import": "./dist/plugin.js",
+            "require": "./dist/plugin.cjs",
+            "types": "./dist/plugin.d.ts"
+        },
         "./types": {
             "import": "./dist/types.js",
             "require": "./dist/types.cjs",
@@ -34,6 +39,11 @@
             "require": "./dist/stores.cjs",
             "types": "./dist/stores/auth.d.ts"
         },
+        "./guards": {
+            "import": "./dist/guards.js",
+            "require": "./dist/guards.cjs",
+            "types": "./dist/guards/authGuard.d.ts"
+        },
         "./*": "./app/assets/*"
     },
     "files": [

vite.config.ts

@@ -12,7 +12,9 @@ export default defineConfig({
         outDir: './dist',
         lib: {
             entry: {
-                types: 'app/assets/interfaces/index.ts', 
+                plugin: 'app/assets/plugin.ts',
+                types: 'app/assets/interfaces/index.ts',
+                guards: 'app/assets/guards/authGuard.ts',
                 stores: 'app/assets/stores/auth.ts'
             }
         },