devise token auth api をAngular4 でUIを実装する4

      2017/08/25

※angularの完成物のBitbucketのリンクです
Angular4-devise-token-auth

関連記事
devise token auth を使って簡単に早くAPIを作る1( api作成 )
devise token auth を使って簡単に早くAPIを作る2 ( jsonの出力 )
devise token auth api をAngular4 でUIを実装する1 ( angularのセットアップ )
devise token auth api をAngular4 でUIを実装する2
devise token auth api をAngular4 でUIを実装する3
devise token auth api をAngular4 でUIを実装する4 今回はここ!

今回はログインした後にデータにアクセスできるようにしていきます

auth.service.tsを修正

ログイン機能を便利にするために修正を加える
ここでは、ログインに必要な

  • token
  • uid
  • client

情報をローカルストレージに保存できるようにします

新規登録のためのメソッドをhobby.service.tsに追加する

まずは、hobby serviceを生成します

作成後はpostmanでのリクエストと同様に

  • token
  • uid
  • client

情報をheaderに付与してリクエストを行えるようにします

このheaderがTrueの場合のみ、jsonデータにアクセスできます

hobby.service.tsをapp.module.tsに追加する

app.module.tsに追加しないと、そもそも認識されませんので追加します

ログインしていればhobbyの情報をgetできるようにする

まずは、ログインした情報ローカルストレージに保存できるよう修正します

app.component.tsを修正

ログイン情報は完成したので、次はapp.component.tsを修正して、hobbyのデータを取得します
データは初期化時に取得 + ロードボタンも設置し、追加した後にクリックすればリロードされるようにします

これで一通りの実装は完了です

最後のチェック!

このチュートリアル通りに進めていけばこのような画面になり
401 のエラーステータスが帰ってきていると思います

次にログインしてみましょう

ログインができていたら、response情報が帰ってきます
無事にログインができたらHobby情報の取得ボタンを押してみましょう!

こんな感じのデータが帰ってきます

ちなみに、このようにデータベースに情報を入れた後に

Hobby情報の取得をクリックすると

ちゃんと情報を取得できています!

最後に

進むに連れて駆け足気味になってしまい、すみませんでした。。
本当はedit , deleteなどの機能もやりたかったのですが、時間の都合上できそうもないのでここまでにできればと思います

このチュートリアルはtoken ベースのログイン制限 + JSON APIの作成がメインで基本的にはこの2つをある程度使いこなせれば
クライアントサイドとバックエンド、モバイルアプリなどをトータルで作れるようになります

かなり駆け足だったので、間違いや不明点などもあるかと思いますので、気になったことがあればコメントを残してもらえると修正ができるのでありがたいです

最後までみてくださった方はありがとうございました!

 - Angular, Javascript, Rails, typescript , , , , , , ,