Add and automatic check links to resources

src/App.vue

@@ -18,6 +18,10 @@ async function doAuthenticatedRequest() {
   const response = await authServer.get('/oidc-test-web')
 }
 
+function getResourceUrl(url: string): string {
+  return settings.resourceServerUrl + "/" + url
+}
+
 function logout() {
   keycloak.logoutFn && keycloak.logoutFn()
 }
@@ -34,7 +38,10 @@ async function get_resource(id: string) {
       msg.value = ""
     }
   ).catch(
-    err => msg.value = err
+    err => {
+      resource.value = []
+      msg.value = `${err.message} (${err.response.statusText}): ${err.response.data["detail"]}`
+    }
   )
 }
 </script>
@@ -84,7 +91,24 @@ async function get_resource(id: string) {
         </div>
       </div>
     </div>
-    <div v-if="msg" class="msg resource">{{ msg }}</div>
+    <div v-if="msg" class="msg resource error">{{ msg }}</div>
+    <div class="content">
+      <p>
+        These links should get different response codes depending on the authorization:
+      </p>
+      <div class="links-to-check">
+        <a v-bind:href="getResourceUrl('public')">Public</a>
+        <a v-bind:href="getResourceUrl('protected')">Auth protected content</a>
+        <a v-bind:href="getResourceUrl('protected-by-foorole')">Auth + foorole protected content</a>
+        <a v-bind:href="getResourceUrl('protected-by-foorole-or-barrole')">Auth + foorole or barrole protected
+          content</a>
+        <a v-bind:href="getResourceUrl('protected-by-barrole')">Auth + barrole protected content</a>
+        <a v-bind:href="getResourceUrl('protected-by-foorole-and-barrole')">Auth + foorole and barrole protected
+          content</a>
+        <a v-bind:href="getResourceUrl('fast_api_depends')" class="hidden">Using FastAPI Depends</a>
+        <a v-bind:href="getResourceUrl('introspect')">Introspect token (401 expected)</a>
+      </div>
+    </div>
     <div v-if="settings.tokenSandbox" class="token-info">
       <hr>
       <div>
@@ -98,14 +122,14 @@ async function get_resource(id: string) {
         <h2>access token</h2>
         <div class="token">
           <div v-for="(value, key) in keycloak.tokenParsed">
-            <div class=" key">{{ key }}</div>
+            <div class="key">{{ key }}</div>
             <div class="value">{{ value }}</div>
           </div>
         </div>
         <h2>refresh token</h2>
         <div class="token">
           <div v-for="(value, key) in keycloak.refreshTokenParsed">
-            <div class=" key">{{ key }}</div>
+            <div class="key">{{ key }}</div>
             <div class="value">{{ value }}</div>
           </div>
         </div>

src/main.ts

@@ -44,6 +44,7 @@ axios.get("settings.json").then().then(
       },
       onReady(keycloak: Keycloak) {
         initializeTokenInterceptor(keycloak)
+        checkPerms('links-to-check')
       },
     })
     app.mount("#app")
@@ -72,4 +73,25 @@ function initializeTokenInterceptor(keycloak: Keycloak) {
   })
 }
 
+async function checkHref(elem: HTMLLinkElement) {
+  await resourceServer.get(elem.href).then(
+    resp => {
+      elem.classList.add("hasResponseStatus")
+      elem.classList.add("status-" + resp.status)
+      elem.title = "Response code: " + resp.status + " - " + resp.statusText
+    }).catch(err => {
+      elem.classList.add("hasResponseStatus")
+      elem.classList.add("status-" + err.response.status)
+      elem.title = "Response code: " + err.response.status + " - " + err.response.statusText
+    })
+}
+
+function checkPerms(className: string) {
+  var rootElems = document.getElementsByClassName(className)
+  Array.from(rootElems).forEach(elem =>
+    Array.from(elem.children).forEach(elem => checkHref(<HTMLLinkElement>elem))
+  )
+}
+
+
 const app = createApp(App)