Vuexを使って

いい感じにjwt認証を実装してみた

2019/09/18 v-kansai Vue.js/Nuxt Meetup #10

Motoyasu Meguro

自己紹介

目黒元康(1974年12月生まれ)
19年のサラリーマンSE生活を退職しフリーランスになる。
現在株式会社@IoT (滋賀県草津市) に所属しつつ。
CODE-HOUSE(個人事業)を経営中。

趣味は自転車

@mm-git

@wRoute

株式会社 @IoT

滋賀県草津市

主な業務内容

IoTアプリ開発(sigfox/awsを使ってIoTの情報を可視化)
go/postgresqlを使ったバックエンド開発
aws/GCPのサーバインフラ整備
vue/reactを使った業務系アプリ開発
iOS/androidアプリ開発

CODE HOUSE

I'm a software engineer.

主に業務系アプリ開発
サーバインフラ、バックエンド、フロントエンドまで
vue/go(graphQL)
iOSアプリリリースあり

　(mapboxを使った地図アプリです)

Route GPXコマ地図エディタ

App storeにて販売中

本題

サンプルアプリ

ログインしたらTODOリストが見れるアプリ

を例にお話しします。

話すこと

Vuexを使う理由
jwtを使ったvuex実装例サンプル

話さないこと

Vuexのテスト関連
typescript関連

本日のコード

vuex-jwt-sample(フロント)

https://github.com/mm-git/vuex-jwt-sample

auth-sample-jwt(バックエンド)

https://github.com/mm-git/auth-sample-jwt

本題の前に

Vuexとは？

Vuex

vueで扱いたい、状態、データをコンポーネントとは別にパッケージ化してくれるライブラリ。

コンポーネントからはVuexのActionsを実行する。
Vuexでバックエンドとのやり取りを行い、結果をMutationsを介してStateに反映する。
コンポーネントはStateの値を表示に使う。

出典 [https://vuex.vuejs.org/ja/] vuexとは何か

本題の前に

jwt(json web tokenとは)

jwtとは

ユーザ情報(userIdなど)や有効期限を含んだjson文字列に電子署名をして改ざんできないようにしたもの。
URL-safeな文字列(base64)。
実際のtoken文字列↓

ログインとjwt

最初だけIDとパスワードでログイン認証を行う。
ID、パスワードが合っていた場合のみjwtが発行される。
jwtの有効期限が切れるまではjwtを使ってサーバにアクセスできる。

ID, password

jwt

※ホテルのチェックインで名前を言うと、チェックアウトまで有効なカードキーをもらうようなイメージ

jwtの中身

〇

ピリオドで3パートに区切られている

header(暗号の方式など)
payload(ユーザ情報や有効期限)
signature(電子署名)

jwtのpayload

{
    "uid":"test",
    "exp":1568042806,
    "jti":"d04a53b6-1087-4c14-b0b1-bd47c78a8d47",
    "iat":1568042786,
    "iss":"auth-sample-jwt",
    "sub":"AccessToken"
}

↓base64デコード

ユーザID

有効期限

２種類のトークン

アクセストークン

APIのアクセスに使うトークン
有効期限が短め(１時間など)
- リフレッシュのないサービスだと１時間後にはログアウト
有効期限内は何回でも使える。

リフレッシュトークン

アクセストークンの有効期限更新に使うトークン
有効期限が長め(24時間とか、半年とか)
一回のみリフレッシュできる。
リフレッシュすると、それまでのアクセストークンは無効

このようなjwtを

vuexを使っていい感じに管理しよう

・・・というのが今日のお話

なぜVuexを使うのか？

Vuexを使う理由①

複数のページで使うデータを一元管理
他のVuexストアから使うデータを一元管理

複数個所で使うデータを一元管理したい

今回の例だとログインしているのかの状態とjwtのデータを１つのストアで管理したい。

Vuexを使う理由②

コンポーネント(SFC)は表示にかかわることのみを書きたい。
Vuex側に表示以外のコードを分離したい。
特にサーバとの非同期な処理をSFCに書きたくない。

コンポーネント側にバックエンドとのやり取りを書きたくない

ログイン認証の処理をSFCには書きたくない。

Vuexを使う理由③

devtoolsで状態を確認しやすい

ストアごとの状態をdevtoolsでパッと見ることができる。

Vuexの実装例

ログインストア実装

ログインを管理するauthストアを実装してみる

ストアフォルダの構成

Vuexのstoreごとにフォルダをわける。
各ストアはstateやactionごとにファイルをわける。
アプリの規模が大きくなるようなら、更にサブフォルダにわける。

・・とわかりやすいです。

Tips !!

ちなみに、ストアのindex.jsの中身は・・

stateやactionsのファイルをimportして

それらをexport defaultしているだけ

store.jsなどの中身は・・

export defaultにstateやactionsの中身を書いていく

ストアの持つデータ

サーバから直接受け取るデータ + そのストアの状態を表すデータはstate.jsに記載
これらのデータから算出できる情報はgettersに記載する。

Tips !!

state.js

ログイン成功時にサーバから受け取るデータ
- accessToken / refreshToken
authストアの状態
- status

getters.js

ログインしているかどうか

トークンのpayload

トークンの有効期限

stateから算出できるものはgettersに記載。

ログインの状態遷移

そのストアの持つ状態とその遷移のパターンを考えてみる。
状態をそのままmutationsに実装するときれいにまとまる。

Tips !!

mutation-types.js

mutaionsで定義する関数の名前(=状態)は、

あらかじめconstで定義しておくと便利。

mutations.js

mutationsの各関数は、mutation-types.jsで定義したconstを使って書いていく。

['文字列']で関数が定義できるのが、最初理解できませんでした・・・

遷移の矢印をactionsで実装

実装が必要なのは action と書いてある矢印。
それ以外の矢印は、actionの結果非同期で遷移が発生する。

actions.js の login()

actionsの関数は非同期な処理なので、asyncで定義する。
非同期処理の前にrequesting状態にする。(commit)
サーバへの非同期リクエストをawaitで待って、結果をcommitする。
- 成功：login状態へ
- 失敗：logoutへ戻る
最終状態がloginならtrueを応答する。

Tips !!

actions.js の logout()

処理としては、ストアの持っているデータをクリアするだけ。
なので非同期な処理はなく、logout状態をcommitするだけ。

actions.js の refresh()

トークンの有効期限が十分なら、何もせずtrueを返す。
非同期処理の前にrefreshing状態にする。(commit)
サーバへの非同期リクエストをawaitで待って、結果をcommitする。
- 成功：login状態へ
- 失敗：expiredへ
最終状態がloginならtrueを応答する。

store.jsの編集とストアの永続化

追加したVuexストアは自動では読み込んでくれない。
- store.jsの編集が必要。
ブラウザのリロードでauthのデータがクリアされると困る。
- vuex-persistedstateの導入。

Tips !!

src/store.js

Vuex.storeのmodulesに

作ったストアを追加していく

vuex-persistedstateプラグイン

永続化したいストア全体または

ストアのstateを追加する。

ログイン画面実装

ログイン画面からauthストアを使ってみる

ログイン画面

Vuexにログイン処理のほとんどが書かれているので

ログイン画面ファイルのほとんどが、画面デザインに関するコード
loginボタンを押したら、Vuex authストアのlogin()アクションを呼ぶだけでいい。

views/Login.vue

VuexのmapXXXXヘルパ関数

ストアのactionやstateなどを、あたかもこのコンポーネントに定義したmethodsやpropsの様に扱うことができる。

Tips !!

のかわりに

this.$store.dispatch('auth/login', ...)

this.login()

だけでストアのactionを実行することができる。

views/Login.vue

ストアのlogin()の結果をawaitで待つことで、ログインの成功／失敗を判定できる。

Tips !!

awaitでログイン結果が待てるので、watch:でauthのstatusを監視する様なことは不要。

TODO画面実装

ログイン後の画面はauthストアを意識しない

TODO画面

TODOのリストをサーバから取得する処理も、Vuexに分離する

TODO画面は、TODOリスト取得に必要なアクセストークンを知る必要はない。
画面が表示されたら、VuexのTODOリスト取得アクションを呼ぶだけ。
取得されたTODOリストをVuexのStateを介して表示

views/List.vue

TODOリストのコンポーネントの処理はこれだけ！！

  methods: {
    ...mapActions('todoList', ['fetch']),
  },
  computed: {
    ...mapState('todoList', ['todoList'])
  },
  async created () {
    await this.fetch()
  },

todoListのactions.js

アクションから他のストアのアクションを呼ぶことができる。
他のストアのStateを参照することもできる。

import Vue from 'vue'
import * as types from './mutation-types'

export default {
  async fetch (action) {
    const res = await action.dispatch('auth/refresh', {}, { root: true })
    if (!res) {
      return false
    }

    action.commit(types.REQUESTING)
    
    const accessToken = action.rootState.auth.accessToken
    //以下 axiosを使ったGET処理
    :
  }
}

Tips !!

トークンが必要な処理の直前でauthのrefresh()を実行

authストアの

アクセストークンを使用

デモ

ログインアプリを動かしてみます

ID: test、password: aaaaaaaa
アクセストークン15秒
リフレッシュトークン20秒

その他のTips

Router.js

すでにログイン済みの状態でログイン画面にアクセスした場合。

Tips !!

:
import store from './store'

Vue.use(Router)

const guardLogin = (to, from, next) => {
  if (!store.getters['auth/isAuthenticated']) {
    next()
    return
  }
  next('/list')
}

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login,
      beforeEnter: guardLogin
    },
    :
  ]
}

↓

beforeEnterでTODOリスト画面へ移動させることができます。

・・・もちろんその逆も。

詳細はコード参照。

App.vue

トークンの有効期限がきれたら、timeout画面へ移動

Tips !!

export default {
  name: 'app',
  computed: {
    ...mapState('auth', ['status'])
  },
  watch: {
    status (newStatus) {
      if (newStatus === 'token_expired') {
        this.$router.push('/timeout')
      }
    }
  }
}

おしまい

ありがとうございました

vuex tips and jwt

By Motoyasu Meguro

vuex tips and jwt

1,701

Motoyasu Meguro

Backend, Frontend and Infrastructure Engineer.

code-huose.jp