Vuexとは コンポーネントが共有するデータの状態を、グローバルに管理するライブラリ。 storeと呼ばれるアプリケーションのデータの状態を保持するコンテナを使用して、 コンポーネントとデータの取得・保存を行う。 storeの４つの機能 state アプリケーション全体のデータの状態を管理。 データの状態を確認したり、特定のデータの状態を見つけることができる。 mutations stateの更新だけを行う。 actionsを通じてコミット（実行）される。 データの変更をデバッグするとき、mutationsのおかげでデバッグが容易になる。 actions mutationsの呼び出しやAPIとの非同期通信を行う。 ※actions自体は直接stateを変更できない。 getters computedと同様の動きをして、stateの値を算出したものを返す場合に役立つ。 値がキャシュされ、gettersが依存しているstateが更新されない限り再評価しない。 相関図 まとめ 必ず、mutationsを通じてstateを変更する。 ４つの機能に分けたことで、データの流れを追いやすくデバッグのしやすい状態管理を実現できる。 参考教材 https://www.techpit.jp/courses/24

検証用にVue.jsアプリとDocker起動しているKeycloakを接続してみたため、手順をメモしておく。 構成 keycloak_test - docker-compose.yml - fe - app-vue Keycloakコンテナ作成 docker-compose.ymlの準備 docker-compose.yml Keycloak起動用 version: "3" volumes: mysql_data: driver: local services: mysql: image: mysql:5.7 volumes: - mysql_data:/var/lib/mysql environment: MYSQL_ROOT_PASSWORD: root MYSQL_DATABASE: keycloak MYSQL_USER: keycloak MYSQL_PASSWORD: password keycloak: image: quay.io/keycloak/keycloak:latest container_name: "keycloak" environment: DB_VENDOR: MYSQL DB_ADDR: mysql DB_DATABASE: keycloak DB_USER: keycloak DB_PASSWORD: password KEYCLOAK_USER: admin KEYCLOAK_PASSWORD: P@ssw0rd ports: - 8080:8080 depends_on: - mysql コンテナ起動 docker-compose up Keycloak設定 http://localhost8080からAdmin Consoleにアクセスする。認証情報は、docker-compose.ymlを参照のこと。 こちらの手順(「Create a realm」から...)に従い、Keycloak設定を行う。 Vue.js フロント部分作成 プロジェクト作成 cd fe vue init webpack-simple app-vue ※すべてデフォルトを選択する。 依存ライブラリインストール npm i keycloak-js --save npm i vuejs-logger --save コード修正 こちらを参考にmain.js,App.vueを修正する。 main.js initOptionsに対して、以下の修正を行っている。 realm：自環境に合わせて修正 CheckLoginiframe：追加 import Vue from 'vue' import App from './App.vue' import VueLogger from 'vuejs-logger'; import * as Keycloak from 'keycloak-js'; Vue.use(VueLogger); let initOptions = { url: 'http://127.0.0.1:8080/auth', realm: 'myrealm', clientId: 'app-vue', onLoad: 'login-required',CheckLoginiframe:false } let keycloak = Keycloak(initOptions); keycloak.init({ onLoad: initOptions.onLoad, checkLoginIframe:initOptions.CheckLoginiframe }).then((auth) => { if (!auth) { window.location.reload(); } else { Vue.$log.info("Authenticated"); new Vue({ el: '#app', render: h => h(App, { props: { keycloak: keycloak } }) }) } //Token Refresh setInterval(() => { keycloak.updateToken(70).then((refreshed) => { if (refreshed) { Vue.$log.info('Token refreshed' + refreshed); } else { Vue.$log.warn('Token not refreshed, valid for ' + Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000) + ' seconds'); } }).catch(() => { Vue.$log.error('Failed to refresh token'); }); }, 6000) }).catch(() => { Vue.$log.error("Authenticated Failed"); }); App.vue <template> <div id="app"> <img src="./assets/logo.png" /> <h1>{{ msg }}</h1> <h2>User: {{ keycloak.idTokenParsed.preferred_username }}</h2> <div> <button class="btn" @click="keycloak.logout()">Logout</button> </div> <div id="wrapper"> <div class="jwt-token"> <h3 style="color: black">JWT Token</h3> {{ keycloak.idToken }} </div> <div class="jwt-token"> <h3 style="color: black">Info</h3> <ul> <li>clientId: {{ keycloak.clientId }}</li> <li>Auth Server Url: {{ keycloak.authServerUrl }}</li> </ul> </div> </div> <h2>Essential Links</h2> <ul> <li><a href="https://keycloak.org" target="_blank">Keycloak</a></li> <li> <a href="https://github.com/keycloak/keycloak-quickstarts" target="_blank" >Code Repo</a > </li> <li> <a href="https://twitter.com/keycloak" target="_blank">Twitter</a> </li> </ul> </div> </template> <script> export default { name: "app", props: ["keycloak"], data() { return { msg: "Welcome to Your Secured Vue.js App with Keycloak", }; }, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: block; margin: 0 10px; color: #333; font-size: 20px; } a { color: #42b983; } #wrapper { display: flex; margin-top: 100px; } .jwt-token { width: 50%; display: block; padding: 20px; margin: 10 0 10px; font-size: 13px; line-height: 1.42857143; color: #333; word-break: break-all; word-wrap: break-word; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; color: #d63aff; font-weight: bolder; } .btn { color: #fff; background-color: #0088ce; border-color: #00659c; padding: 6px 10px; font-size: 14px; line-height: 1.3333333; border-radius: 1px; } </style> 動作確認 起動 npm run dev -- --port 3000 http://localhost:3000にアクセスする。 (Keycloakエンドポイントにリダイレクトされるので、)ユーザー認証情報を入力する※上記「Keycloak設定」で登録した値。 以下の画面が表示される。 参考情報 Secure a Vue.js single-page application with Keycloak Keycloak Quickstarts 2.2.1. セッション・ステータスiframe

こんな感じ はじめに Nuxtで作ったwebアプリで、スマホアプリのsplash screen（?のような起動時に表示される画像）を表示させたいと思いました。 よくあるローディング画面とは違って、必ず指定した秒数だけ表示させるようにしたかったので色々と調べた結果をここに記録します！！ splash screen用の画面 最初の画面が表示される前に、ふんわりとロゴが表示されます。 components/LoadingScreen.vue <template> <div :class="{ loader: true, fadeout: !isLoading }"> <div class="page-container"> <img class="splash" src="@/assets/images/Logo.png" /> </div> </div> </template> <script lang="ts"> import Vue from "vue"; export default Vue.extend({ name: "LoadingScreen", props: ["isLoading"], }); </script> <style scoped> .page-container { max-width: 500px; width: 100%; margin: auto; } .loader { background-color: #ffffff; bottom: 0; color: white; display: flex; align-items: center; text-align: center; left: 0; overflow: hidden; position: fixed; right: 0; top: 0; } .splash { width: 150px; } .fadeout { animation: fadeout 2s forwards; } @keyframes fadeout { to { opacity: 0; visibility: hidden; } } </style> LoadingScreen.vueを一番最初に表示させる Nuxtで一番上の階層？にあるdefault.vueを編集。 これでindex.vueが読み込まれる前にsplash screenっぽい感じで、ロゴ画像をふんわりと表示させることに成功しました！ layouts/default.vue <template> <div> <LoadingScreen :isLoading="isLoading" /> <transition name="fade" v-if="!isLoading"> <Nuxt /> </transition> </div> </template> <script> const LoadingScreen = () => import("../components/LoadingScreen.vue"); export default { components: { LoadingScreen, }, data() { return { isLoading: true, }; }, mounted() { setTimeout(() => { this.isLoading = false; }, 1000); }, }; </script> <style scoped> .fade-enter-active, .fade-leave-active { transition: opacity 1s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style> 参考