WINDIIテック現役フリーランスエンジニアが運営するテックメディア。Moduleを使ってJWT認証を導入する方法を説明します。作るものソースコードソースコードはこちらバックエンドの準備こちらにJWT認証のためのモックサーバを用意しました。起動手順は以下の通りです。(Node.js、npmが入っていることが前提です。index.jshttp://localhost:8080/でサーバが立ち上がります。XXXXXXXXX(トークン)を付与すると以下のようなレスポンスが返ります。Cliの準備すでにお済みの方は飛ばしてください。人は以下のコマンドを実行しましょう。dev以下のような画面が立ち上がれば成功です!*エラーが出る場合はこちらが参考になるかもしれません。@nuxtjs/vuetify簡単に各ライブラリの説明をします(すでにご存知の方は飛ばしてください!)AxiosAxiosはJavaScript環境で用いられるPromiseベースのHTTPクライアントです。今回はログイン認証やプロフィール情報取得のHTTPリクエストを送るために使用します。ModuleNuxtで認証を簡単に導入するためのモジュールです。今回はJWT認証のために使いますが、OAuth2に対応し、様々なProviderに対応しているので大体の認証はこれでいけるのではと思います。ドキュメントはこちらVuetifyVuetifyとはVueでマテリアルデザインを使うときに便利なライブラリです。React、Angularのマテリアルデザイン用ライブラリと比べてもかなり綺麗で使いやすい印象です。(一押し)各モジュールの設定インストールが終わったらnuxt.config.jsに各モジュールの設定をして行きます。以下を追加しましょう。'@nuxtjs/vuetify',],次にモジュールをセットアップします。nuxt.config.jsに以下を追加します。}},store/にindex.jsがないと怒られるので、追加して置きましょう。(からでOKです)ひとまず立ち上がるか確認してみます。devレイアウトを作る本記事の内容でレイアウトをこだわりすぎても仕方ありませんが、Vuetifyならサクッといい感じにレイアウトできるので少しだけお付き合いください。layouts/default.vueを以下のようにします。</v-content></v-app></template><style></style>同様にpages/login.vueを作成して以下のようにします。},}</script><style></style>プロフィールページも作りましょう。pages/profile.vueを以下のようにしましょう。{}</script><style></style>これでレイアウトは終わりです!それでは認証ロジックを構築して行きましょう!ログイン処理の実装ログインボタンを押したときに実行されるメソッドを追加します。}}ログインボタンを押したときに追加したメソッドを実行できるように以下のように修正しましょう。@click="submit">ログイン</v-btn>これで正しいユーザIDとパスワードを入れるとプロフィールに飛べます。(tanaka,passwordで入れます)プロフィールの実装それでは、次にプロフィールです。pages/profile.vueに以下の記述を追加します。}}さん!!</h1>のようにするとログインユーザの名前が表示されます。現在の状態ですと右側にプロフィール、ログイン、ログアウト全てが表示されてしまっているのでログイン状態に応じて切り替えましょう。ついでにログアウト機能もつけます。propertyとログアウト処理のためにlogout()メソッドを追加します。},},テンプレート側ではisAuthenticatedの値に応じてボタンを出し分けます。ログアウトボタンが押されたときlogout()メソッドが実行されるように設定します。v-if="!isAuthenticated">ログイン</v-btn>以上で基本的な機能は実装完了です。最後にMiddlewareの設定をして行きましょう。基本的な認証処理の実装は完了しましたが、一つ問題があります。ログインしていない状態で/profileにアクセスしてみてください。以下のような画面が出ます。通常のアプリケーションではログインしていない状態でユーザがプロフィール画面などにアクセスしたときリダイレクト処理をします。この機能を実装するためにNuxtではMiddlewareという仕組みがあります。それでは早速設定して行きましょう。pages/profile.vueに以下の記述を追加してください。}}たったこれだけの設定で先ほどのリダイレクト処理ができてしまいます。Moduleによって提供されています。ログイン済みのユーザが/loginにアクセスした時も同様に/profileにリダイレクトしましょう。Moduleによって提供されていないようなので自作しましょう。middleware/にguest.jsというファイルを作って以下のように記述します。}}pages/login.vueに先ほどのようにMiddlewareを追加しましょう。'guest',これでリダイレクトされるようになります。最新の記事ririWINDII(ウィンディ)は、フリーランスエンジニアが運営するテックメディアです。Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。(全て見る)Canvaが最高すぎる。Contentful。Contentful。HeadlessC...11NOV2018Vuetifyチュートリアル。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。