java Spring Vue

Vue.js + Spring Boot + Heroku(認証作成 Vue編)

更新日:

内容

Vue.js + Spring Boot + HerokuでSPAを作成しました。
Vue.jsとSpring Bootは同じリポジトリ上で管理し、ビルドも同時に実施します。
それにより、最低限のソースコード管理とHerokuへのデプロイ時にまとめてビルドする状態を実現しました。
本記事は第四弾として、認証認可のVueの実装を紹介します。

Github

Vue.js + Spring Boot + Heroku(はじめに 兼 まとめ)

Vue.js + Spring Boot + Heroku(プロジェクト作成~ビルド)

Vue.js + Spring Boot + Heroku(Herokuへデプロイ〜環境毎プロパティファイル作成)

Springで環境毎に異なるDBを設定する。

Vue.js + Spring Boot + Heroku(認証作成 Spring Boot編)

Vue.js + Spring Boot + Heroku(認証作成 Vue編)

Vue.js + Spring Boot + Heroku(サンプルAPI作成)

ライブラリ追加

axiosを使用するため、ターミナルからnpmに追加します。

src/vue/src配下のmain.jsにaxiosとvuexを設定

vuexにログイン・ログアウトを実装

src/vue/src配下にstoreフォルダを作成して配下にindex.jsを作成し、ログイン処理を実装する。

App.vueにログインサンプルを実装

src/vue/src配下のApp.vueにログイン・ログアウトのサンプルを実装します。

vue-CLIのプロキシ設定

vueの開発はvue CLIのserveを利用して開発します。
開発時はvue CLIでローカルにホストしたvueからローカルにホストしたSpring BootのAPIへアクセスします。Vue CLIの開発用ローカルサーバから取得したJavascriptからSpring BootのローカルサーバへアクセスするとCORSの制約に引っかかるので、src/vue/配下のvue.config.jsへVue CLIのプロキシサーバを指定します。
※直接指定するとCORSの制約でブラウザのセキュリティ機能によりエラーとなります。

vue.config.js

vue-CLIのweb consoleから「タスク」→「serve」→「タスクの実行」で開発用ローカルサーバを起動します。

起動が完了したら、http://localhost:8081/vue/へアクセスし、挙動を確認します。
Springで環境変数毎に異なるDBを設定する。のデータであれば「user1, password」「user2, password」でログインできます。

Spring Bootでホストした挙動を確認するため、IntelliJのmavenタブからmaven installを実行してVueをビルド。

【追記】windows環境の場合、npmコマンドの–prefixオプションが意図した動作をしません。手動でのビルドが必要です。

Spring Boot起動中の場合は一旦終了(■マーク)し、Spring Bootを起動(▶︎マーク)。http://localhost:8080/へアクセスし、トップページを確認。

次章

-java, Spring, Vue

Copyright© 若手SIerサラリーマンの独学メモ , 2024 All Rights Reserved Powered by STINGER.