cleanup

src/App.vue

@@ -1,15 +1,17 @@
 <template>
-  <!-- <a :href="loginUrl" v-if="!roles.length">Login</a> -->
-  <a :href="loginUrl" v-if="false">Login</a>
-  <template v-else>
-    <header :class="{ contactmomentLoopt: contactmoment.contactmomentLoopt }">
-      <global-search>
-        <template #articleFooter="{ id, title }">
-          <search-feedback :id="id" :name="title"></search-feedback>
-        </template>
-      </global-search>
-    </header>
-    <router-view />
+  <simple-spinner v-if="user.loading" />
+  <template v-if="user.success">
+    <a :href="loginUrl" v-if="!user.data.isLoggedIn">Login</a>
+    <template v-else>
+      <header :class="{ contactmomentLoopt: contactmoment.contactmomentLoopt }">
+        <global-search>
+          <template #articleFooter="{ id, title }">
+            <search-feedback :id="id" :name="title"></search-feedback>
+          </template>
+        </global-search>
+      </header>
+      <router-view />
+    </template>
   </template>
 </template>
 
@@ -18,11 +20,11 @@ import { RouterView } from "vue-router";
 import { GlobalSearch } from "./features/search";
 import { useContactmomentStore } from "@/stores/contactmoment";
 import SearchFeedback from "./features/feedback/SearchFeedback.vue";
-import { useCurrentUserRoles } from "./features/user";
+import { useCurrentUser, loginUrl } from "./features/user";
+import SimpleSpinner from "./components/SimpleSpinner.vue";
 
 const contactmoment = useContactmomentStore();
-const roles = useCurrentUserRoles();
-const loginUrl = window.gatewayBaseUri + "/login/oidc/dex";
+const user = useCurrentUser();
 </script>
 
 <style lang="scss">

src/features/user/service.ts

@@ -1,7 +1,21 @@
 import { ServiceResult } from "@/services";
 import { computed } from "vue";
 
-function fetchUserRoles(url: string) {
+export type User =
+  | {
+      isLoggedIn: false;
+    }
+  | {
+      isLoggedIn: true;
+      id: string;
+      roles: string[];
+    };
+
+export enum Roles {
+  admin = "ROLE_scope.POST.admin",
+}
+
+function fetchUser(url: string): Promise<User> {
   return fetch(url, {
     credentials: "include",
   })
@@ -10,19 +24,28 @@ function fetchUserRoles(url: string) {
       return r.json();
     })
     .then((json) => {
-      if (!json.data?.roles?.length)
-        throw new Error(
-          "Gebruiker is niet ingelogd of heeft geen rollen. json: " + json
-        );
-      return json.data.roles as string[];
+      const roles = json?.roles;
+      const id = json?.id;
+      if (typeof id !== "string" || !id)
+        return {
+          isLoggedIn: false,
+        };
+      return {
+        isLoggedIn: true,
+        roles: Array.isArray(roles) ? roles : [],
+        id,
+      };
     });
 }
 
-export function useCurrentUserRoles() {
-  const state = ServiceResult.fromFetcher(
-    window.gatewayBaseUri + "/me",
-    fetchUserRoles
+export const useCurrentUser = () =>
+  ServiceResult.fromFetcher(window.gatewayBaseUri + "/me", fetchUser);
+
+export function useHasRole(role: Roles) {
+  const user = useCurrentUser();
+  return computed(
+    () => user.success && user.data.isLoggedIn && user.data.roles.includes(role)
   );
-  const roles = computed(() => (state.success ? state.data : []));
-  return roles;
 }
+
+export const loginUrl = window.gatewayBaseUri + "/login/oidc/dex";

src/views/HomeView.vue

@@ -3,7 +3,7 @@
     <header>
       <utrecht-heading model-value :level="1">Startscherm</utrecht-heading>
       <a
-        v-if="roles.includes('ROLE_scope.POST.admin')"
+        v-if="isAdmin"
         :href="pubBeheerUrl"
         rel="noopener noreferrer"
         target="_blank"
@@ -122,7 +122,7 @@ import {
 import { parseValidInt } from "@/services";
 import MultiSelect from "@/components/MultiSelect.vue";
 import { ContactmomentStarter } from "@/features/contactmoment";
-import { useCurrentUserRoles } from "@/features/user";
+import { useHasRole, Roles } from "@/features/user";
 
 const { pubBeheerUrl } = window;
 
@@ -135,7 +135,7 @@ const currentSkills = ref<number[]>([]);
 
 const berichtTypes = useBerichtTypes();
 const skills = useSkills();
-const roles = useCurrentUserRoles();
+const isAdmin = useHasRole(Roles.admin);
 
 const selectedSkills = computed(() => {
   if (skills.state !== "success") return undefined;

vite.config.ts

@@ -6,6 +6,9 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  server: {
+    https: true,
+  },
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),