トークンベースの認証についてのまとめ

dyson   in Japan

# Intro to Authentication

認証についての概要

# JWTについて

大きく三つの要素で成り立っている

  • header
    • タイプ(JWT)
    • ハッシュアルゴリズム
  • Payload
    • 含めたいデータなんでも
    • 有効期限とか
  • Signature
    • Header + Payload + Secret

# 第二章

この講座におけるログインの流れは以下の通り

  • ログイン時
    • ユーザーの情報をVuexに保存する
    • トークンをVuexに保存する
    • axiosのヘッダーにトークンを設定する
  • ログアウト時
    • 上記の逆

# 第三章

SET_USER_DATA (state, userData) {
      state.user = userData
      localStorage.setItem('user', JSON.stringify(userData))
      axios.defaults.headers.common['Authorization'] = `Bearer ${
        userData.token
      }`
    },

こんな感じでミューテーションの中でaxiosのデフォルトヘッダーに設定する。

# 第7賞

こんな感じでVueインスタンスを作成するときにaxiosのinterceptorsをこのように使えばサーバ側から401が返されたときに自動的にログアウトしてくれる。なのでlocalstrorageを悪意あるユーザーが無理やりいじってログイン専用ページに遷移したとしてもサーバ通信して401がかえってきたらログアウトされてログイン画面に遷移されるということ。

new Vue({
  router,
  store,
  created () {
    const userString = localStorage.getItem('user')
    if (userString) {
      const userData = JSON.parse(userString)
      this.$store.commit('SET_USER_DATA', userData)
    }
    axios.interceptors.response.use(
      response => response,
      error => {
        if (error.response.status === 401) {
          this.$store.dispatch('logout')
        }
        return Promise.reject(error)
      }
    )
  },
  render: h => h(App)
}).$mount('#app')

ただこれログインが必要なページのcreatedで毎回ログインしてるかどうかのリクエスト投げないといけないような気が？ となると今自分が実装しているようにrouterのbeforeEachで毎回「Vuexに認証情報が入ってるか」「もし認証情報が入ってなかったら/meというエンドポイト叩いてログインしてるかどうか尋ねる」みたいなやりかたでもいいのかなと思った。

JWTについて