KeycloakDashboardHeader.vue

<template>
  <button
    class="navbar-toggler collapsed d-md-none"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#sidebarMenu"
    aria-controls="sidebarMenu"
    aria-expanded="false"
    aria-label="Toggle navigation"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">
    {{ appName }}
  </a>

  <ul class="navbar-nav px-3">
    <li v-if="isAuthenticated" class="nav-item text-nowrap">
      <a class="nav-link" href="#" @click="logout">Ausloggen</a>
    </li>
    <li v-if="!isAuthenticated" class="nav-item text-nowrap">
      <a class="nav-link" href="#" @click="login">Einloggen</a>
    </li>
  </ul>
</template>

<script>
/**
 * A header for the Dashboard Layout. Uses vue-keycloak for login
 * mechanics. Only configurable parameter is `appName`.
 */

import { useKeycloak } from "@baloise/vue-keycloak";
export default {
  props: {
    appName: { type: String, default: "AppName" },
    noKeycloak: { type: Boolean, default: false }, // mock keycloak with static values
  },
  setup(props) {
    if (props.noKeycloak) {
      const isAuthenticated = false;
      const login = () => console.log("Login");
      const logout = () => console.log("Logout");
      return { isAuthenticated, login, logout };
    } else {
      const { keycloak, isAuthenticated } = useKeycloak();
      const login = keycloak.login;
      const logout = keycloak.logout;
      return {
        login,
        logout,
        isAuthenticated,
      };
    }
  },
};
</script>