認証機能

認証機能

qiita.com

いきなり認証機能を実装しようとするのは無理がありました(//∇//)\

SSR(Server Side Rendering) についてや、その処理の中で使用する技術（AsyncData)など色々知らないと理解できないっぽいので学習を切り替えます

SSR・CSR

SSRや非同期通信については NuxtガイドやVueガイドなどでインプットしていきます

nazo.hatenablog.com

omiend.hatenablog.jp

asyncData

ja.nuxtjs.org

このメソッドは、ブラウザからサーバにアクセスした時とページ遷移をするときに呼び出されるみたいです。ページ遷移をするときに呼び出されるということは、サーバに送られるHTTPリクエストにログイントークンが存在すればこのユーザはログイン済みみたいなことも可能なのかな...？

ただし、このメソッドはコンポーネントがロードされる前に実行されるみたいなのでコンポーネントのdataオブジェクトにあるプロパティにはアクセスできないということに注意しなければならないみたいです。

このメソッドはただ単に非同期を実現するためではなく、データを引数にとって処理をしてくれるらしい。つまり、このメソッドにパラメータを渡し、axiosを用いてHTTP通信をするみたい。あれ、でもAxiosもPromiseベースに作成されたモジュールだから非同期処理できなかったっけ？って思ったので忘れかけてたPromiseについて調べてみます

qiita.com

わかりやすかった！とりあえずプロミスについては理解できました。ですが、PromiseベースのAxiosとの違いがよくわからないのでAxiosについてみてみることに

jp.vuejs.org

AxiosはPromiseのHTTP通信特化型みたいなイメージで大丈夫ですかね？Promiseは非同期全般で、AxiosはHTTP通信のための非同期みたいな？かんじ？（わかる方はもしよろしければコメントでこの解釈があっているか教えていただけると助かります🙇‍♀️）

でも、それだったらAxiosでthis.emailとthis.passwordとかでHTTPリクエストに入れて運べば別にAsyncDataは必要ない気がしますがなぜ必要なのでしょうか？

多分これは認証のために使うのではなく、ユーザIDをパラメータに渡し、マイページの名前や、項目を取得するために使うのが一般的なのかな？

とりあえず動作については理解できたので、実際にアプリで使う場面をイメージしてみます