Udemy
Udemyの動画教材「RailsAPIとNuxt.jsで作るユーザーJWT(JSON Web Token)ログイン認証」の台本を公開しています。
このカテゴリーは完成しました。(更新終了)
1.
このカテゴリーの歩き方
2.
Docker入門
3.
Dockerを使ったRails+Nuxt.js環境構築
1
【Docker+Rails6+Nuxt.js】今回作成するアプリの開発環境の全体像を知ろう
2
【MacOS】Homebrew経由でGitをインストールする方法
3
Rails6を動かすAlpineベースのDockerfileを作成する(AlpineLinuxとは何か)
4
Nuxt.jsを動かすAlpineベースのDockerfileを作成する(C.UTF-8とは何か)
5
.envファイルを使ったdocker-compose.ymlの環境変数設計
6
Rails6・Nuxt.js・PostgreSQLを動かすdocker-compose.ymlファイルを作成する
7
docker-compose.ymlを使ってRails6を構築する(PostgreSQLパスワード変更方法)
8
docker-compose.ymlを使ってNuxt.jsを構築する
4.
複数プロジェクトのGit管理
5.
RailsAPI×Nuxt.js初めてのAPI通信
6.
Heroku.ymlを使ったDockerデプロイ
7.
モデル開発事前準備
8.
ユーザーモデル開発
1
Railsユーザーモデル作成。テーブル設計・ユーザー認証設計を理解する
2
Railsユーザーモデルのバリデーション設定(has_secure_password解説)
3
Railsバリデーションエラーメッセージの日本語化(ja.yml設定方法)
4
EachValidatorクラスのカスタムバリデーション設定(Rails6/lib以下読込)
5
Rails環境ごとにSeedデータ切り替えるseeds.rbの書き方
6
Rails6から導入された並列テストを理解する
7
Railsユーザーモデルバリデーションテスティング(name/email/password)
8
Nuxt.jsからRailsのユーザーテーブルを取得しHerokuにデプロイする
9.
Nuxt.jsフロント開発事前準備
10.
ログイン前のレイアウト構築
1
Nuxt.jsのレイアウト・ページ・コンポーネントの役割を理解しよう
2
Nuxt.js ウェルカムページを構成するコンポーネントファイル群を作成しよう(1/4)
3
Nuxt.js ウェルカムページにアイキャッチ画像・アプリ名・メニューボタンを表示しよう(2/4)
4
Nuxt.js addEventListenerでスクロールを検知しツールバーの色を変化させよう(3/4)
5
Nuxt.js ウェルカムページをレスポンシブデザインに対応させよう(4/4)
6
Nuxt.js 会員登録ページのレイアウトファイルを作成しよう(1/4)
7
Nuxt.js 名前、メール、パスワードのコンポーネントファイルを作成しよう(2/4)
8
Nuxt.js 親子コンポーネント間の双方向データバインディングを実装する(3/4)
9
Nuxt.js Vuetifyのv-text-fieldを使った会員登録フォームのバリデーション設定(4/4)
10
Nuxt.js ログインページ実装とHerokuデプロイまで(router. replaceとpushの違いとは)
11.
ログイン後のレイアウト構築
12.
サーバーサイドのログイン認証
1
JWTとは何か?(ruby-jwtのインストール)
2
【Rails×JWT】ログイン認証解説とJWT初期設定ファイルの作成
3
【Rails×JWT】トークン発行とデコードを行うAuthTokenクラスの作成
4
【Rails×JWT】 ログイン判定を行うAuthenticatorモジュールの作成
5
【Rails×JWT】UserクラスからJWTを扱うTokenizableモジュールの作成
6
【Rails×JWT】AuthTokenクラスとAuthenticatorモジュールをテストする
7
【Rails×JWT】JWTをCookieに保存するログインコントローラーの実装
8
【Rails×JWT】ログインコントローラーのテストとHerokuデプロイ
13.
フロントエンドのログイン認証
1
【Rails×Nuxt.js】クロスオリジン通信でのCookie共有設定
2
【Nuxt.js】Railsからのログイン成功レスポンスをVuexに保存する
3
【Nuxt.js】ローカルストレージの有効期限を暗号化する(crypto-js解説)
4
【Nuxt.js】JWT有効期限内のユーザーをログインしたままにする実装
5
【Nuxt.js】ログイン前後のリダイレクト処理をミドルウェアで実装する
6
【Nuxt.js】ログイン失敗時のトースターをグローバルイベントとして作成する
7
【Nuxt.js】エラーページを作成する
8
【Rails×Nuxt.js】デモプロジェクトの作成とHerokuデプロイ(ログイン認証完)
14.
本番環境への対応