React使ってSPAを作るよ(20)

React使ってSPAを作るよ(20)

React使ってSPAを作るよ目次

React使ってSPAを作るよ(19)の続きです。

前回まではユーザー認証部分を擬似的に判定していましたが、Laravel側でユーザーのAPIを作ってもらったので書き換えていきたいと思います。
(Laravel側の説明ができません。勉強したい)

index.htmlに、ユーザーIDとユーザー名を保持するinput[type=”hidden”]が置いてあります。

@if (!Auth::guest())
<input type="hidden" name="user_id" value="{{ Auth::user()->id }}">
<input type="hidden" name="user_name" value="{{ Auth::user()->name }}">
@endif

サイトにアクセスしてレンダリングする時点でログイン状態ならここにユーザーIDが入ります。
そこで、JSを読み込むときに、先頭であらかじめこのユーザーIDを変数に入れておきます。

var loggedin = $('[name="user_id"]').attr('value');

このあと認証の必要な場面で都度loggedinを見ることになります。
そもそもログインしていなかったらundefinedになり、ログインしていたらユーザーIDを特定できます。

前回の記事で表示/非表示を切り替えていた記事の削除ボタンは、このようになります。

        {(() => {
          if (loggedin === this.props.userId) {
            return <ArticleDelete articleID={this.props.articleID}/>;
          }
        })()}

記事の投稿者のユーザーIDと、閲覧中のユーザーIDが一致していれば削除ボタンを表示します。

※もちろんこれだけだと開発ツールでユーザーIDや記事IDを書き換えたりできてしまうので、実際にAPIを叩くときに認証処理を挟みます。

ユーザーIDがわかればそのユーザーのアイコンのパスもわかるので、ナビゲーションの表示も切り替えられます。
React使ってSPAを作るよ(18)のソースをちょっと修正しましょう。

とりあえず今回はここまで~
次回はコメントのリストを作ります!

React使ってSPAを作るよ目次