react

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


React使ってSPAを作るよ目次

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

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

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

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

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

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

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

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

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

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

React使ってSPAを作るよ目次

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です