はじめに

このアプリは、クライアントサイドは、Vue.jsを使ってSPA（シングルページアプリケーション）を実現し、サーバーサイドは、Slim Frameworkを使ってログイン認証を実現させています。

https://github.com/isamusuzuki/vue-slim-auth

何を作ったのか？

Topページは、誰でも見ることができます。
Loginページでは、user / user@123でログインできます。
Secretページは、ログイン後でないと見られません。
Secretページでは、認証トークンをつけてAPIを叩いています。
ログインしていない状態でSecretページに行くと、Loginページに遷移します。
遷移された状態でログインに成功すると、元のページに戻ります。

クライアントサイドの特長

JavaScriptコードは、Webpackなどでコンパイルしていません。
scriptタブにtype=moduleを指定し、importコマンドを使って別ファイルを読み込んでいます。（よって、IEでは動作しません）
Bulma, FontAwesome, Vue.js, axios, Vue-Router, Vuexを組み込んでいますが、コンパイルしていないので、すべてCDNを使っています。

サーバーサイドの特長

サーバーは、静的ファイルを吐き出すか、APIとして働くかの二通りのみで、テンプレートは使っていません。
/authAPIは、ログイン認証に成功すると、JWT(JSON Web Token)を返します。
/auth以外のAPIは、Authorizationヘッダーにトークンを入れないとエラーを返します。

なぜ作ったのか？

インストール方法・ファイルディレクトリ構成については、GitHubのREADMEをご覧いただくとして、ここでは、なぜこのような構成になったのか、経緯と意図を説明してみたいと思います。

なぜPHPなのか？

職場の上司から「LAMPを使え」と言われたからです。PythonもNode.jsも担当者が辞めたとたんにブラックボックスになるからという理由でNGでした。

なぜローカル開発環境がXAMPPなのか？

職場のPCにはウイルスバスターコーポレートエディションがインストールされており、Hyper-VもVirtualBoxも動かすことができなかったからです。したがってDockerを選択肢に入れることができませんでした。

なぜSlim Frameworkなのか？

LaravelとSlim Frameworkでどちらにするか迷いましたが、C言語しか経験がない同僚にも使ってもらうためには、なるたけ簡易なものがいいと考え、独断でSlim Frameworkを採用しました。

どうやってログイン認証を実現しているのか？

ここで強調しておきたいことは、「Slim Frameworkでもログイン認証はできる」ということです。tuupola/slim-jwt-authというミドルウェアを1個追加するだけです。

このミドルウェアのREADMEには「俺は認証トークン生成／判定／保管はしないぜ」と書いてあったのですが、実は問題ありません。そのことを詳しく説明した記事（英語）はこれです。

Slim3 Framework Authorization with JWT (JSON Web Tokens)

なぜSPA（シングルページアプリケーション）なのか？

ログインに成功すると有効期限付きのトークンが返ってきますが、これはセッション／クッキー／ローカルストレージのどこにも保存していません。JavaScriptが変数として保持しているだけです。でもSPAなので、ログイン後のページをユーザーに見せることができます。

したがって、F5キーを押してリロードするとログイン前の状態に戻ってしまいますが、とりあえず簡単に確実なセキュリティを実現しているのはSPAだからなのです。

なぜVue.jsなのか？

私が勉強した中で一番グッときたJSフレームワークだったからです。

なぜCDNなのか？なぜコンパイルしないのか？

C言語しか経験がない同僚も短期間で戦力にするには、とにかく敷居を下げることが大事だったからです。今回の経験で、読みやすいサンプルコードと簡単に作れるローカル開発環境があれば、どのレベルの開発者でも巻き込めると確信を得るに至りました。

どうしてVue-RouterとVuexを使っているのか？

これがないとSPAを実現できませんので。必要に迫られると理解も進みます。

前に自分が書いた投稿が、いい意味でブーメランのように自分に返ってくるとは、お釈迦様でも驚くことでしょう。

Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件

どうしてBulmaなのか？

CSSファイルオンリーのCSSフレームワークだからです。

どうしてFont Awesomeなのか？

Bulmaと相性がいいからです。

最後に

ソースコードはGitHubに載せています。C言語しか経験がない同僚が完全に理解しているのかどうかは怪しいのですが、これを元にWebアプリを開発していますので、ニーズに合う方は、是非ソースコードを見てみてください。