ha6_6ruブログ

主にフロントエンドの技術ネタを中心にしていく予定です。

Vue 3 Auth Guard(未認証の場合にログインページにリダイレクト)

はじめに 次のような振る舞いを実現する場合、Vue.js(Vue Router)ではナビゲーションガードを利用します。 ECサイトで購入手続きに入ろうとしたときにログインページに飛ばされる 最初にログインが必要なサイトで、ログイン以降に表示されるページにアクセ…

PiniaのactionからVue Routerを使ってルーティング

はじめに ストアのactionでルーティングを行うにはどうすればよいかを解説します。 準備 piniaのストアインスタンスにプロパティを追加し、Vue Routerのインスタンスを設定しておくことで、ストアからVue Routerを使うことができます。 公式ドキュメントの説…

axiosの脆弱性解析事例(JVNDB-2020-013151)

はじめに この記事では、axiosの脆弱性(JVNDB-2020-013151)を題材に、エンタープライズ系案件の脆弱性対応について紹介したいと思います。 この記事で題材にするエンタープライズ系案件の特徴としては、例えば大規模で自動テストも無く、簡単にはバージョ…

Vue.jsをベースにしたWebフロントエンドのアーキテクチャとその実行環境

はじめに この記事は Vue Advent Calendar 2020 の 25 日目の記事です。 Vue.jsを使ったアプリケーション開発とは少し趣旨を変えて、Vue.jsをベースにしたWebフロントエンドのアーキテクチャとその実行環境について整理します。 スクエア free セミナー 第11…

コード値(区分値)選択用フィールドの作り方

概要 業務用アプリケーションによくあるコード値の選択用フィールド 作り方 コード値選択フィールドの外観 Vuetifyを使った実装指針 その1 コード値をキャッシュする template script その2 コード値を都度WebAPI経由で取得する template script 終わりに …

Vue3の始め方

はじめに Vue.js 3.0リリースに併せて、Vue.jsをハンズオン形式で学習する書籍を出版しました。 書籍では、Vue3への移行情報や新機能の中心になっているComposition APIを解説しています。 書籍の宣伝を兼ねて、2020年10月時点のVue3の取り組み方について解…