2022.08.15この記事は約4分で読めます。Nuxt3でアクセストークンを使った簡易な認証フローの構築をしてみます。middlewareを使います。middlewareはNuxt2にも同様にあった仕組みです。サーバーサイド(SSRサーバ初回アクセス時)、クライアントサイドで動作し、ページ遷移時に認証などのフィルタを挟んだりすることができます。ページコンポーネントに以下のように記述することで、ミドルウェアを宣言的に適用することができます。'auth'})</script>参照:ミドルウェアディレクトリなお、server/middlewareという仕組みもありますが、これはサーバーリクエストごとに動作するミドルウェアです。ドキュメントにもあるように、何らかのチェックやヘッダの操作、ロギングなどに使用する用途のようです。expressでrouteをマウントしても呼ばれます。httpフレームワークのミドルウェアとして登録されます。middlewareの仕組みを使って構築してみます。以下のような構成にしてみます。moduleもcookieを使った同様の機構があります。トークンはcookieに保存、ログイン時にcookieに書き込む。クライアント側でもread/writeするのでHttpOnly属性はなし。SSR時は、cookieからトークンを読み出して使う。middlewareでは、cookieから値を読み出しログイン済みかどうかをチェックする。この他、以下の仕組みを使うので補足します。middlewareですが、middlewareディレクトリに配置すると自動でインポートされます。.globalというサフィックスをつけることで、全体に対して適用することができます。middleware/auth.tsdefinePageMetaでページコンポーネントに対してミドルウェアを適用するmiddleware/auth.global.ts全体に渡ってミドルウェアが適用されるuseCookieuseCookieというcomposableライブラリを使用します。useCookieは、サーバサイドとクライアントサイドで使えます。useCookieによる返り値に対しvalueを書き込みすることで、裏でNuxtが上手いこと処理をしてくれます(具体的には後述の通り)。accessTokenこれにより、SSR時でもアクセストークンを取得し、フェッチリクエスト時にヘッダにトークンを埋め込むことができるようにします。クライアントサイドの動作クライアントサイドでは、document.cookieより指定したcookieを取得します。そのため、HttpOnlyが指定されたcookieは使えません。useCookieにより得たcookieはrefオブジェクトとなっており、valueに値を書き込むことでdocument.cookieにシンクされます。サーバサイドの動作サーバサイドでは、フックのタイミングでレスポンスヘッダにcookieが書き込まれます。middlewareを使った例では、実際に構築してみます。フローを確認するためのサンプルなので、エラーチェックやその他バリデーションなど厳格さは欠いていますことご容赦ください。server/api/login.ts今回は、トークンを返すだけの簡易な処理としています。token",};});server/api/posts.tsログイン後に何らかの投稿記事一覧を返す処理とします。リクエストヘッダから、Authorizationヘッダを読みトークンを確認します。トークンがあれば、ひとまず記事一覧を返すとします。},],};});middleware/auth.global.tsuseCookieを使っています。ログインに成功すると、cookieに値を書き込みます。同時にdocument.cookieにも書き込まれます。@click="logout">logout</button></div></div></template>以下のような感じで動きます。コピーbyebyehaikikyouをフォローするbyebyehaikikyouデバッグライフ関連記事NuxtJSNuxt3でNuxt-Authモジュールを使って認証処理をつくる以前、以下の投稿で簡易な認証機能を試してみました。以下は認証フローのイメージを掴むための簡易なサンプルでしたので機能は不十分でした。今回は、Nuxt-Authというモジュールを使って認証機能を組み込むための方法について見ていきたいと...NuxtJSNuxt3でのビルド後の環境変数の適用(node-server)Nuxt3にはdotenvが組み込まれていて、プロジェクトトップにある.envファイルを読み込み環境変数として使用することができます。devモード時は気にしませんが、ビルド後に例えばnode-serverで実行するような場合、利用者側でno...NuxtJSNuxt3でページにstyleを適用するNuxt3でページにスタイルを指定する方法についてです。Headタグ使うSFC内に以下のように記述する事でスタイル指定が可能です。setupに書くこともできます。useH...NuxtJSNuxt3+Electronで簡易なアプリを作成してみる心地よい春の季節となりました、一方で私にとっては毎年悩まされる花粉症の時期でもあります。人一倍症状が強いので、きつめの薬を飲んで耐え忍んでいる今日この頃です。今年はかなりキツめな気がしてます、、一日中鼻がむずむずし、鼻水も止まりませ...NuxtJSNuxt3でwebsocketを使うNuxt3のリリースを見ると、SummerからAutumnになっていましたね。リリースが待ち遠しい。Nuxt3でwebsocketを使うにはどうするかを調べていたところ、Nuxt2とは少し異なるようでした。本記事では、Nuxt3でw...NuxtJSNuxt3でページ遷移時にページトップにスクロールするNuxt3でページ遷移時にページトップにスクロールさせる方法についてです。rc.13版にアップグレードしてみるとスクロールトップのオプションが入っているようでした。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。名前:moritetuITエンジニア地方でITエンジニアをしています。Webやスマフォアプリ、Hadoopなどのビッグデータに関するシステムに関わり、現在は企画開発の業務をしています。(必須)サイトタイトルとURLをコピーしました。