こんにちはjunです。webアプリを作成する時は大体、認証機能をつけることが多いです。LaravelやDjangoなどでは一発で行けますが、Nuxt.js、Vue.jsを使用したSPA、Node.jsでのSSRコンテンツを作成する場合は一捻り必要です。 Nuxt.jsなどで作成するアプリはバックエンドと独立し、都度バックエンドへのAPI通信の際にトークンを渡したりすることで認証が必要なAPIへアクセスしています。 ビュー側の処理でも ログインしているユーザーはこのように表示 このルートはログインしているユーザーのみアクセス可能 未ログインユーザーはログイン画面移動 といった処理が行われることが多いです。この記事では上記のような認証を用いたビューの表現、ルーターの設定をNuxt.jsでどう行うかの解説をしたいと思います。SPA(クライアントサイドレンダリング)とSSR(サーバーサイドレンダリ
![Nuxt.jsのSSR・SPA時のフロント側の認証ビューを自前で実装する](https://cdn-ak-scissors.b.st-hatena.com/image/square/d0126e0ca6e49e26960564e314780262f249af96/height=288;version=1;width=512/https%3A%2F%2Fjun-app.com%2F_nuxt%2Fimg%2Fnuxt.9ac24bd.jpg)