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

「devise token auth api をAngular4 でUIを実装する4」のアイキャッチ画像

※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つをある程度使いこなせれば
クライアントサイドとバックエンド、モバイルアプリなどをトータルで作れるようになります

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

コメント(7件)

  • you&me より:

    いつも楽しくブログを拝見させております。
    rails(api)とAngularでアプリケーションの開発を行おうとしている初心者です。

    質問ですが、rails(api)とAngularについて参考になる本、webサイト等がありましたら教えて頂けないでしょうか?

    • hiyashikyuri より:

      Angularはこちらが参考になるかと思います
      私も参考本を探して見ましたが、国内外含めてあまりなかったので、HPやブログ、有料サイトで勉強した感じですね
      以下のリンクは全てWebサイト情報です

      rails api の方は割と情報はあるかと思いますが、どのような開発を行うかで勉強する範囲を絞るのも手だと思います
      ただし、情報はAngularと同じで「ドンピシャ」の部分は残念ながら少ないです。
      なので、devise_token_authとangularを組み合わせてわかりやすく便利にしようとした、という理由でこの記事をまとめたんですよ笑

      ご質問に対する回答が微妙かもしれませんが、angularやrails apiの不明点があれば、この記事にでもコメントいただければ、可能な限りお手伝いしますね!
      頑張ってください!

  • you&me より:

    ご返信ありがとうございます。
    ちなみにログイン後の画面遷移を実現したいのですがどうしたら良いでしょうか。

    ご教授していただけると幸いです

    イメージ的にはこんな感じです。
    http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial

    • hiyashikyuri より:

      一番簡単なやり方は app.routing.ts に

      • ログイン前のルート
      • ログイン後のリダイレクトルート

      の2つを加えて、ログインがOKの状態なら、つまりstatus code === 200 ならリダイレクト画面に移動させる

      という方法が手っ取り早いのではないかと思います

  • you&me より:

    post後に返ってきたResponse {_body: “{“data”:{“id”:100}”}の中のid部分を取得する際はどうしたら良いでしょうか?

  • you&me より:

    Current_userの情報をログイン後に表示したいのですが、なかなかうまくいきません。
    何か、ヒントを頂けないでしょうか。

    • hiyashikyuri より:

      最近仕事が忙しくてなかなか時間が取れませんでした。
      申し訳ないです;;

      ここでいうCurrent_userとはemail情報と捉えて良いのであれば、
      component側で

      this.authService.getUid(); をどっかしらに入れてそれをhtml側で表示させれば問題ないかと思います。

      不明点があればまたご返信ください

コメントする

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

CAPTCHA