diff --git a/README.md b/README.md index fc5411c..c5737c1 100644 --- a/README.md +++ b/README.md @@ -53,10 +53,10 @@ createApp(App).use(vueKeycloak, { ### Configuration -| Config | Type | Description | -| ----------- | ------------------------------------------------------------------------------------------ | ---------------------------------------- | -| initOptions | `Keycloak.KeycloakInitOptions` | `initOptions` is Keycloak init options. | -| config | `string \| Keycloak.KeycloakConfig \| KeycloakConfigFactory \| KeycloakConfigAsyncFactory` | `config` are the Keycloak configuration. | +| Config | Type | Description | +| ----------- | ----------------------------------- | ---------------------------------------- | +| initOptions | `Keycloak.KeycloakInitOptions` | `initOptions` is Keycloak init options. | +| config | `string \| Keycloak.KeycloakConfig` | `config` are the Keycloak configuration. | Use the example below to generate dynamic Keycloak conifiguration. @@ -131,9 +131,9 @@ import { useKeycloak } from '@baloise/vue-keycloak' export default defineComponent({ setup() { - const { hasRole, isPending } = useKeycloak() + const { hasRoles, isPending } = useKeycloak() - const hasAccess = computed(() => hasRole('RoleName')) + const hasAccess = computed(() => hasRoles(['RoleName'])) return { hasAccess, @@ -154,11 +154,11 @@ const { isPending, hasFailed, token, + decodedToken, username, roles, // Functions - hasRole, hasRoles, } = useKeycloak() ``` @@ -169,6 +169,7 @@ const { | isPending | `Ref` | If `true` the authentication request is still pending. | | hasFailed | `Ref` | If `true` authentication request has failed. | | token | `Ref` | `token` is the raw value of the JWT token. | +| decodedToken | `Ref` | `decodedToken` is the decoded value of the JWT token. | | username | `Ref` | `username` the name of our user. | | roles | `Ref` | `roles` is a list of the users roles. | @@ -176,7 +177,6 @@ const { | Function | Type | Description | | -------- | ------------------------------ | ------------------------------------------------------------ | -| hasRole | `(role: string) => boolean` | `hasRole` returns true if the user has the given role. | | hasRoles | `(roles: string[]) => boolean` | `hasRoles` returns true if the user has all the given roles. | # License diff --git a/src/composable.test.ts b/src/composable.test.ts index 88a0e0a..d1581f1 100644 --- a/src/composable.test.ts +++ b/src/composable.test.ts @@ -14,18 +14,6 @@ describe('useKeycloak', () => { expect(roles.value).toStrictEqual([]) }) }) - describe('hasRole', () => { - test('should tell if the user has the role or not and is authenticated', () => { - state.isAuthenticated = true - state.roles = ['my-role'] - const { hasRole } = useKeycloak() - - expect(hasRole('my-role')).toBe(true) - expect(hasRole('not-my-role')).toBe(false) - expect(hasRole(undefined)).toBe(false) - expect(hasRole(null)).toBe(false) - }) - }) describe('hasRoles', () => { test('should tell if the user has the role or not and is authenticated', () => { state.isAuthenticated = true diff --git a/src/composable.ts b/src/composable.ts index b69e5e2..86cd231 100644 --- a/src/composable.ts +++ b/src/composable.ts @@ -9,14 +9,12 @@ export interface KeycloakComposable { token: Ref username: Ref roles: Ref - hasRole: (role: string) => boolean hasRoles: (roles: string[]) => boolean } export const useKeycloak = (): KeycloakComposable => { return { ...toRefs(state), - hasRole: (role: string) => !isNil(role) && state.isAuthenticated && state.roles.includes(role), hasRoles: (roles: string[]) => !isNil(roles) && state.isAuthenticated && roles.every(role => state.roles.includes(role)), } diff --git a/src/keycloak.ts b/src/keycloak.ts index 010047c..0b58848 100644 --- a/src/keycloak.ts +++ b/src/keycloak.ts @@ -24,9 +24,7 @@ export function getKeycloak(): Keycloak.KeycloakInstance { export async function getToken(): Promise { await isTokenReady() - if ($keycloak === undefined) { - throw new Error('Keycloak was not initialized.') - } + try { await $keycloak.updateToken(10) updateToken($keycloak.token as string) diff --git a/src/state.ts b/src/state.ts index 633a62b..7e32812 100644 --- a/src/state.ts +++ b/src/state.ts @@ -1,11 +1,12 @@ import { reactive } from 'vue' import jwtDecode from 'jwt-decode' -export interface KeycloakState { +export interface KeycloakState { isAuthenticated: boolean hasFailed: boolean isPending: boolean token: string + decodedToken: T username: string roles: string[] } @@ -15,6 +16,7 @@ export const state = reactive({ hasFailed: false, isPending: false, token: '', + decodedToken: {}, username: '', roles: [] as string[], }) @@ -29,6 +31,7 @@ interface TokenContent { export const updateToken = (token: string): void => { state.token = token const content = jwtDecode(state.token) + state.decodedToken = content state.roles = content.realm_access.roles state.username = content.preferred_username }