java Spring Vue

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

更新日:

内容

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

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作成)

Spring Securityをmavenに設定

pom.xmlにSpring Securityを設定する。

IntelliJ右側のMavenタブを開き、Mavenのグルグルマーク(Reload All Maven Projects)をクリック

Spring Securityを設定

Spring Securityの設定をするため、UserForm.java, SpaAuthenticationFilter.javaを作成し、SecurityConfig.javaを設定

・DBはSpringで環境変数毎に異なるDBを設定する。の通り。

・APIは/api/配下のURLとし認証を必要とする。

・vueは/vue/配下に配置して認証を必要としない。

・ログインは/api/loginで実施する。

・認証はCookieを利用する。

・csrf対策用にX-CSRF-TOKENをCookieに含める。

UserForm.java

SpaAuthenticationFilter.java

SecurityConfig.java

CORSを追加したい場合は下記を追加。

プロパティファイルでSecure属性を指定

本番環境のみCookieにSecure属性を指定するため、application-heroku.propertiesに追記。
※プロパティファイルの構成はSpringで環境変数毎に異なるDBを設定する。の通りです。

試験

Spring Boot起動中の場合は一旦終了(■マーク)し、Spring Bootを起動(▶︎マーク)。ターミナルからcurlコマンドでCookieが払い出されることを確認します。
Springで環境変数毎に異なるDBを設定する。のデータであれば「user1, password」「user2, password」でログインできます。

コマンド例

次章

-java, Spring, Vue

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