Webアプリケーションには必ずと言っていいほど、ログインなどの認証機能を有しています。
みなさんが普段利用するサービスの中にもあると思います。
この記事では、Nuxt.jsでmiddlewareを使ってログインしているユーザーかどうかを認証する方法を解説していきたいと思います。
middlewareとは
Nuxt.jsのmiddlewareでは、ページを表示する前に実行できる処理を定義することができます。
そのため、ページを表示する前にログインしているかユーザーかどうかを判定して、ログインしていないユーザーだった場合にはログイン画面にリダイレクトするといった処理を実装するのに向いています。
今回は、このような機能を実装して、middlewareの使い方を解説していきたいと思います。
storeの作成
まずは、認証状態を保持するstoreを定義していきましょう。
ここではstore/auth.jsを作成して、stateにログインして取得した認証トークンを保持するtokenを初期値nullで定義します。
const state = {
token: null,
}stateの定義ができたら、stateのtokenを用いてログイン状態を判定するためのgettersを定義します。
const getters = {
isLogined: (state) => !!state.token,
}middlewareの作成
次に認証状態を判定してログインしていない場合にはログイン画面にリダイレクトするmiddlewareを作成していきましょう。
デフォルトの状態ではNuxt.jsのプロジェクトにmiddlewareフォルダがないので、middlewareフォルダを作成しましょう。
そこに認証の判定を行う処理を記述するauth.jsを作成していきましょう。
auth.jsには下記のように実装します。
export default function ({ redirect, store, route})
{
const isLogined = store.getters["auth/isLogined"]
if (!isLogined && route.path !== '/login') {
redirect('/login');
}
}middlewareは引数にcontextを受け取ります。
contextにはVuexのストアにアクセスできるstoreインスタンスやVue Routerを使うためのrouteインスタンスが定義されています。
contextの詳細は公式ページで紹介されていますので、ぜひ参考にしてみてください。
ここではcontextを分割代入の形で処理に必要なredirect、store、routeだけ引数から受け取るようにしています。
storeのgettersからログイン状態を取得し、ログインしていない状態かつログイン画面以外の場合はログイン画面へリダイレクトするように実装しています。
middlewareの設定
ログイン状態でないとログイン画面以外アクセスできない処理のmiddlewareを実装することは出来ました。
しかし、作成したばかりのmiddlewareは設定しないと機能しません。
では、このmiddlewareを実際に機能するように設定していきましょう。
全ページにmiddlewareを適用するには、nuxt.config.jsに設定します。
export default {
router: {
middleware: ['auth'],
},
}middleware/auth.jsを設定するためにrouterのmiddlewareの値に配列形式で、'auth'を定義します。
これでmiddlewareの設定は完了です。
まとめ
Nuxt.jsのmiddlewareを使って、ログインユーザーの判定をしてリダイレクトする認証機能を実装する方法を解説してきました。
一見難しい機能の実装に思えますが、Nuxt.jsのmiddlewareを使うことで簡単に実装することがこの記事を通して理解していただけたかと思います。
Nuxt.jsのmiddlewareをぜひ使いこなせるようにしていきましょう。
