NuxtでKeycloakの初期化タイミングが遅くて困る場合

はじめに

KeycloakのJavaScript Adapterを使っているとき、Keycloakの初期化がiframe経由になって若干遅い。そうするとまだAccess Tokenが取れていないのにasyncDataが呼ばれて悲しいことになる。なんとかしたい。

対応

https://qiita.com/takyam/items/40067c3f7de2e041e378 にあるようにNuxtのPlugin初期化はawaitをつけて呼ばれるので、Promiseを返すようにすればKeycloakの初期化まで待つようにできる。

keycloak-jsにはonReadyというキーが取れて準備完了したら呼ばれるコールバックがあるので、そのタイミングで解決させれば良い。

例

pluginsディレクトリにこんなのを置いてnuxt.config.jsで使うようにする。ここではkeycloak-jsを直接使わずにvue-keycloak-jsを使った。

plugins/keycloak.js

import Vue from "vue";
import VueKeycloak from "@dsb-norge/vue-keycloak-js";

export default function({ app, env, isServer }) {
  if (isServer) {
    return true;
  }

  const pluginInstalled = new Promise((resolve, reject) => {
    Vue.use(VueKeycloak, {
      config: env.keycloakConfig,
      onReady: function(keycloak) {
        resolve(keycloak);
      }
    });
  });

  return pluginInstalled;
}

べんり。