2021.01.18本記事では、掲示板アプリを想定して、ユーザー登録とログインのサンプルコードと解説を載せています。サンプルコードについては、完全版ではなく検証程度のものです。sanctumで作ったバックエンドに対して、axiosを使用して処理する時の雰囲気がわかるかと思います。バックエンドは前回の記事で作成しましたので、下記を参照してください。Sanctumを使って、認証を実装してみました。バックエンドがLaravelでフロントエンドがNuxt.jsの構成です。Sanctumの導入から、ユーザー登録APIとログインAPIを作成するところ...codelikes.com2021.01.15フロントのSPAはNuxt.jsでvuetifyを使用して作っています。※ユーザー登録と同じように処理するため掲示板投稿のコードについては省略しています。ファイルの配置場所などの詳細については、後述するgithubのコードを確認してください。画面からアクセスしてみる終わりにNuxt環境の準備プロジェクトを作成するまずcreate-nuxt-appを使用して、プロジェクトの環境を準備します。プロジェクトの作成方法については、下記を参照してください。関連記事:[javascript]nuxt.jsを使ってみたvueでページを作ったことがありますが、nuxtはほとんど触ってなかったですが仕事でガッツリ使っていきそうなので、nuxtをちょっと個人でもゴニョってみます!nuxt.jsを使って画面表示を行ってみるまでをやっています。inde...codelikes.com2020.02.07yarnでライブラリをインストールする次に、typescirptを使う環境を作成します。公式のこちらに書いてあるコマンドでインストールします。typescriptを使えるようにします。Decoratorを入れて、デコレータを書けるようにしておきます。nuxt-property-decoratoraxiosを導入して、nuxtからapiにアクセスできるようにします。Originエラーへの対応Cros回避方法はこちらの記事に書きました。[Nuxt.js]axiosをnuxtで使う方法とproxyでのCROS制約回避axiosをnuxtで使う方法です。nuxtでのaxiosの導入方法と、実際に使ってQiitaからデータを取ってきてみています。zipcloudという郵便番号サービスにアクセスを行うと、cros制約にかかったのでcros制約をnuxtで回避...codelikes.com2020.07.13今回はこのように定義してみました。}},ユーザー登録画面のサンプルユーザー登録画面のサンプルコードと解説を載せています。}}</script>解説ユーザー登録のフォームを用意して、上記のように処理を書いてみました。lang="ts">〜</script>の間になります。registerメソッドを用意していて、登録ボタンが押された場合はこちらのメソッドが動きます。paramsには画面で入力した値が入ります。これはaxiosでのリクエストで送るためのパラメータです。次に下記の設定が必要になります。Cookieを送信するかの設定のようです。true;そして通信に入ります。http://localhost:8090/sanctum/csrf-cookieにアクセスします。これでcsrf保護の初期化をしておかないと、POST通信で419エラーになるようです。{csrfの初期化が終わった後に、ユーザー登録APIにリクエストしています。params)その後に、リクエストがステータス200(OK)だったら、掲示板投稿画面に遷移するという流れです。エラーだったらコンソールログを出力してます。ログイン画面のサンプルログイン画面のサンプルコードと解説を載せています。}}</script>解説ログイン画面を作成して、上記のように処理を書いてみました。signInメソッドを用意していて、サインインボタンが押された場合はこちらのメソッドが動きます。signInメソッドの実装ですが、paramsはログインAPIに渡すためのパラメータです。ユーザー登録の時と同じように、csrfを初期化した後に、ログインAPIにアクセスしています。ログインできた場合はステータス200が返ってくるので、その後に掲示板投稿画面に遷移しています。moveCreateAccountメソッドについては、ユーザー登録画面への遷移をしています。動作確認バックエンドのルート確認laravelで定義した、apiのルーティングはこうなりました。/registerがユーザー登録APIになり、/loginがログインAPIのルートになります。/board/createが認証した後に、掲示板を登録する箇所です。'login']);それぞれにアクセスして、動作確認してみます。画面からアクセスしてみるまずユーザー登録をします。登録して、データベースを確認してみると、このように登録されていることが確認できます。登録されたユーザーでログインしてみます。ログインした後に、掲示板の内容を登録してみます。認証が必要なエリアでも、画面から登録できることが確認できました。OK.終わりにユーザー登録をして、ログインして認証エリアでの投稿できることが確認できました。コードと解説を載せてみましたが、なんとなく雰囲気がわかったと思います。同じようなAPIの処理は別のファイルに書くなどの整理が必要そうです。コードを修正していく予定ですが、今回のコードは下記にプッシュしています。GitHub.github.comNuxt.jsプログラミングシェアするTwitterFacebookはてブPocketLINEコピーyasuakiをフォローするyasuakiコードライクプログラミングRubyの学習におすすめ本4選!【現役エンジニア選定】Rubyの学習におすすめの本を4つ紹介しています。Rubyについて簡単に説明して、その後におすすめの本を紹介しました。最後にRubyを「どの本で学ぶのが良いか」の考察をまとめていますので、確認してみてください。(Replaceメソッド)C#で文字列を置換する方法について書いています。文字列からReplaceメソッドを呼び出して使うことで、置換することができます。載せているコードについては、.Netのバージョン6(C#のバージョン10)で確認しました。Replaceメソッド...PHPPHPでコマンドライン引数を渡す・受け取る方法!(argv)PHPでコマンドライン引数を渡して、プログラムで受け取る方法について書いています。コマンドライン引数を渡すには、実行ファイルの後に半角スペースを書いて、渡したい引数を並べます。コマンドライン引数を受け取るときには、プログラムで$argv変数...PHPPHPのfile関数の使い方!ファイルの読み込んで処理する!PHPでfile関数を使って、ファイルを読み込む方法について書いています。載せているサンプルコードについては、PHPのバージョン8.1.8を使って検証しています。file関数の使い方file関数を使うことで、指定したファイルパスのファイルを...PHPPHPのpreg_matchの使い方!正規表現で含むか確認する!PHPのpreg_match関数の使い方について書いています。最初に、関数の概要と使い方を説明しています。その後に、実際に使用したサンプルコードを3パターン載せています。載せているサンプルコードは、PHPのバージョン8.1.4を使って、動作...LaravelLaravelのバリデーションで使える標準ルール11選!Laravelのバリデーションで使える標準のルールで、よく使っているルールの11個について解説しています。ここに上げているバリデーション以外の詳細は、公式のこちらに書いているので確認してみてください。Laravelのバリデーションルールのま...VB.NETVB.NETのリストに要素を追加する方法!追加メソッドは3つ!VB.NETのリストに要素を追加する方法について書いています。リストに要素を追加するときには、下記のメソッドを使うことができます。・Addメソッド・Insertメソッド・AddRangeメソッドリストに要素を追加するリストに要素を追加するに...PHPPHPの配列に要素を追加する3つの方法!(array_push)PHPの配列に要素を追加する方法について書いています。PHPの配列に要素を追加するときには、下記の方法を使います。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δプロフィールyasuaki福岡でフリーランスをやってます。業界歴13年になりました、SESで働くことがほとんどです。なんでもやってますが、Webが得意です。このブログではプログラミング技術の内容を中心に、たまに商品レビューとかを書いています。画面からアクセスしてみる終わりにVue.jsの学習におすすめの本を選定!【現役エンジニアが選定】Vue.jsの学習におすすめの本4選!今回はVue.jsの学習におすすめな本を4つ紹介しています。学習に本が必要かも考えてみたので確認してみてください。Vue.jsの学習に本が必要?Vue.jsはJavaScriptでWebアプリケーションのフロントエンドを開発するときに使われ...codelikes.com2022.10.23JavaScriptの学習におすすめの本を選定!【現役エンジニアが選定】JavaScriptの学習におすすめの本5選JavaScriptの学習におすすめの本を選定してみました。最初にJavaScriptはどんなものかと、学習に本が必要かを考えて書いてみました。商品レビューゲーム食レポお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。