switch to load at main

Author: mythz

MyApp.Client/src/layouts/default.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import NavHeader from '@/components/NavHeader.vue'
 import NavFooter from '@/components/NavFooter.vue'
-import { useApp } from "@/lib/gateway"
-
-let app = useApp()
-app.load()
 </script>
 
 <template>

MyApp.Client/src/lib/auth.ts

@@ -31,11 +31,6 @@ const { user, hasRole, hasPermission, signIn, signOut } = useAuth()
 
 export { user, hasRole, hasPermission }
 
-checkAuth().then(auth => {
-    if (auth) signIn(auth)
-    else signOut()
-})
-
 export async function revalidate() {
     loading.value = true
     const auth = await checkAuth()
@@ -55,25 +50,15 @@ export const signout = async (router:any, redirectTo?: string) => {
     await router.replace({ path: redirectTo ?? router?.currentRoute?.value.path, force: true })
 }
 
-
-// Use Route Guards to guard against access to pages 
-type RouteGuard = { path:string, attr:string }
-const routes:RouteGuard[] = [
-    { path:'/profile',       attr:'auth' },
-    { path:'/admin',         attr:'role:Admin' },
-    { path:'/bookings',      attr:'role:Employee' },
-    { path:'/bookings-crud', attr:'role:Employee' },
-]
-
 export function configRouter(router:Router)  {
-    const invalidAttrRedirect = (to:RouteLocationNormalized, guardAttr:string, userAttrs:string[]) => userAttrs.indexOf('auth') === -1
+    const invalidAttrRedirect = (to:RouteLocationNormalized, _:string, userAttrs:string[]) => userAttrs.indexOf('auth') === -1
         ? Routes.signin(to.path)
         : Routes.forbidden()
 
     // Validate Route guards against Authenticated User's Attributes
     const validateRoute = (to:RouteLocationNormalized, next:NavigationGuardNext, attrs:string[]) => {
-        for (let i=0; i<routes.length; i++) {
-            const route = routes[i]
+        for (let i=0; i<Routes.guards.length; i++) {
+            const route = Routes.guards[i]
             if (!route) continue
             const { path, attr } = route
             if (!to.path.startsWith(path)) continue
@@ -82,6 +67,7 @@ export function configRouter(router:Router)  {
                 const allowAdmin = isAdmin && (attr.startsWith('role:') || attr.startsWith('perm:'))
                 if (!allowAdmin) {
                     const goTo = invalidAttrRedirect(to, attr, attrs)
+                    console.debug(`Redirecting to ${goTo} as missing required '${attr}' to access '${to.path}'`)
                     next(goTo)
                     return
                 }
@@ -90,7 +76,7 @@ export function configRouter(router:Router)  {
         next()
     }
 
-    router.beforeEach((to:RouteLocationNormalized,from:RouteLocationNormalized,next:NavigationGuardNext) => {
+    router.beforeEach((to:RouteLocationNormalized,_:RouteLocationNormalized,next:NavigationGuardNext) => {
         if (loading) {
             const stop = watchEffect(() => {
                 validateRoute(to, next, attrs.value)

MyApp.Client/src/lib/gateway.ts

@@ -1,6 +1,7 @@
 import { JsonServiceClient } from "@servicestack/client"
-import { useMetadata } from "@servicestack/vue"
+import { useAuth, initMetadata } from "@servicestack/vue"
 import type { Router } from "vue-router"
+import { checkAuth } from "./auth"
 
 const serverRoutePaths = [
     '/Identity',
@@ -17,18 +18,34 @@ export function isServerRoute(path:string) {
     return serverRoutePaths.some(x => path.startsWith(x))
 }
 
+type RouteGuard = { path:string, attr:string }
+const Requires = {
+    auth: (path:string):RouteGuard => ({ path, attr: 'auth' }),
+    role: (path:string, role:string):RouteGuard => ({ path, attr: `role:${role}` })
+}
+
 // Typed Routes used in Components
 export const Routes = {
     signin: (redirectTo?:string) => redirectTo ? `/signin?redirect=${redirectTo}` : `/signin`,
     forbidden: () => '/forbidden',
+
+    // Use Route Guards to guard against access to pages 
+    guards: [
+        Requires.auth('/profile'),
+        Requires.role('/admin', 'Admin'),
+        Requires.role('/bookings-auto', 'Employee'),
+        Requires.role('/bookings-crud', 'Employee'),
+    ],
 }
 
 export const client = new JsonServiceClient()
 
 export function useApp() {
-    async function load (force?:boolean) {
-        const { loadMetadata } = useMetadata()
-        await loadMetadata({ olderThan: 0 })
+    async function load() {
+        const { signIn } = useAuth()
+        initMetadata({ client })
+        const auth = await checkAuth()
+        if (auth) signIn(auth)
     }
     return {
         load,

MyApp.Client/src/main.ts

@@ -6,7 +6,7 @@ import { createHead } from '@unhead/vue/client'
 import App from './App.vue'
 
 import ServiceStackVue from "@servicestack/vue"
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory, RouterLink } from 'vue-router'
 import type { RouteLocationNormalized } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
 import { setupLayouts } from 'virtual:generated-layouts'
@@ -16,8 +16,7 @@ import { Icon } from '@iconify/vue'
 
 import LiteYoutube from "@/components/LiteYouTube"
 import { configRouter } from "@/lib/auth"
-import { isServerRoute } from "@/lib/gateway"
-import { client } from "@/lib/gateway"
+import { isServerRoute, useApp } from "@/lib/gateway"
 
 const app = createApp(App)
 const head = createHead()
@@ -58,15 +57,20 @@ router.beforeEach((to, _from, next) => {
     else next()
 })
 
+ServiceStackVue.component('RouterLink', RouterLink)
+const { client, load } = useApp()
+
 const pinia = createPinia()
 
-app
-    .use(head)
-    .use(router)
-    .use(pinia)
-    .use(ServiceStackVue)
-    .provide('client', client)
-    .provide('press', press)
-    .component('LiteYouTube', LiteYoutube)
-    .component('Iconify', Icon)
-    .mount('#app')
+load().then(() => {
+    app
+        .use(head)
+        .use(router)
+        .use(pinia)
+        .use(ServiceStackVue)
+        .provide('client', client)
+        .provide('press', press)
+        .component('LiteYouTube', LiteYoutube)
+        .component('Iconify', Icon)
+        .mount('#app')
+})

MyApp.Client/src/pages/profile.vue

@@ -17,9 +17,9 @@
     <PrimaryButton class="mt-8" href="/Identity/Account/Manage">
       Identity Auth Account
     </PrimaryButton>
-    <TextLink class="mt-8" href="/">
+    <SecondaryButton class="mt-8" href="/">
       🏠 Home
-    </TextLink>
+    </SecondaryButton>
   </div>
 </template>