製品活用2018-04-27スクラッチから始めるNuxt.jsでログイン!Tech開発Divのeciです。Japanが秋にあることですし、周りがみんな「vue,vue」言い始めたので、Vue.jsを触ってみました。調べていくとNuxt.jsというフレームワークがよさげですので、今回はこれのチュートリアルを元に拡張していこうと思います。Nuxt.jsにはスターターテンプレートが用意されていますが、今回は「スクラッチから始める」の方を参考にしていきます。Nuxt.jsただ、このままですと味気ないですので、ログイン認証まで作っていきます。hellopackage.jsonの作成helloディレクトリ直下にpackage.jsonを作ります。pagespagesディレクトリに、index.vueを作ります。devブラウザで「localhost:3000」に行くと、「hello」と表示されましたか?ログイン認証の実装ここからいよいよログイン認証を作って行きます。ちなみに、ここを参考にしています。やることログインページの作成ストアの用意ミドルウェアの実装nuxt.config.jsの用意hello.vueの作成(indexページだけだと味気ないので...)index.vueの修正ログインページの作成pagesディレクトリにlogin.vueを作ります。}}</script>ストアの用意Vueでグローバルなステートを管理するために、Vuexというライブラリが用意されています。storestoreディレクトリにindex.jsを作成します。これを使って各ページの認証を行います。middlewaremiddlewareディレクトリにauth.jsを作ります。}ストアのauthUserが空だった場合は、「/login」に遷移します。nuxt.config.jsの用意helloディレクトリ直下にnuxt.config.jsを用意します。},}hello.vueの作成pagesディレクトリにhello.vueを作成します。</div></template>index.vueの修正helloページへのリンクおよび、ログアウトボタンを追加します。devログアウトした状態で「/hello」にアクセスしても、無事「/login」に戻ってきますね。まとめhtmlとjs合わせて100行ちょっとでログイン認証の雛形が出来てしまいました。学習コストもかなり低いと思いました。始めたばかりですので、よりよい書き方を追求していきたいと思います。10:31Tweet関連記事2018-03-27コマンドオプションはおまじない?髙橋です。引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。