概要

• ざっくり以下をやる
• サーバーサイド
• ログイン機能
• ログアウト機能
• セッション管理
• API 処理内でのログインユーザーからのリクエストかどうかの認証
• フロント
• ログイン後、ストアでログインユーザー情報の保持
• ストア情報をもとにフロント内でのログインユーザーかどうかの認証
• 自分でもよくわからなくなるので、振り返りのためにまとめるが、わかりやすくまとめる方法もよくわからないので、見返す度にちょくちょく書き直して行く。

環境

• フロントサイド：Nuxt.js
• サーバー & API サイド：Express
• 認証ミドルウェア：Passport
• O/Rマッパー：Sequelize

Passport

認証設定

• 認証用ストラテジー設定
• セッション管理設定

認証用ストラテジー設定

const LocalStrategy = require('passport-local').Strategy;

passport.use( new LocalStrategy((username, password, done) => {
    // username と password で認証を確認して結果を返す
}));

• 認証が成功した時

return done( null, user )

• 認証が失敗した時

return done( null, false, { message: メッセージをつけることも可能です。})

• エラー時

return done( error )

セッション管理設定

• serializeUserにて、ユーザー情報 ( ここではID ) をシリアライズしてセッションに埋め込む。
• deserializeUserにて、リクエスト受取り時にIDからユーザーを特定し、req.user 内に格納する。

// シリアライズ
passport.serializeUser((user, done) => {
  done(null, user.id)
})

// デシリアライズ
passport.deserializeUser((id, done) => {
  User.findById(id, (err, user) => {
    done(err, user);
  })
})

まとめると、こんな感じ

server/passport_auth.js

import db from './models'  // Sequelize

const LocalStrategy = require('passport-local').Strategy

module.exports = (passport) => {
  passport.serializeUser((user, done) => {
    done(null, user.id)
  })

  passport.deserializeUser((id, done) => {
    db.users
      .findOne({
        where: { id: id }
      })
      .then(user => {
        done(null, user)
      })
      .catch(error => {
        done(error, null)
      })
  })

  passport.use(
    new LocalStrategy((username, password, done) => {
      db.users
        .findOne({
          where: { username: username }
        })
        .then(user => {
          if (!user) {
            return done(null, false, { message: 'アカウント名が正しくありません。' })
          }

          if (!user.authenticate(password)) {
            return done(null, false, { message: 'パスワードが正しくありません。' })
          }

          return done(null, user)
        })
        .catch(error => {
          return done(error)
        })
    })
  )
}

Express

API周り

• /login に POST でログイン
• /logout に GET でログアウト
• /me にGETでログインユーザー（自分）の情報を取得

ログイン

  passport.authenticate('local', (err, user, info) => {
    if (err) {
      return next(err)
    }
    if (!user) { // userが存在しない
      return res.status(401).send(info)
    }
    req.login(user, (err) => {
      if (err) {
        return next(err)
      }
      return res.status(200).json(user)
    })
  })(req, res, next)

ログアウト

  req.logout()
  res.status(200).send()

その他の認証

router.get('/me', checkAuthentication, (req, res) => {
  return res.status(200).json(req.user)
})

function checkAuthentication(req, res, next) {
  if (req.isAuthenticated()) {
    next() // 認証済みなら進む
  } else {
    res.status(204).send() // 認証されてないなら 204 (No Content) を返す
  }
}

まとめると、こんな感じ

api/v1/auth.js
import { Router } from 'express'
import passport from 'passport'

const router = Router()

router.post('/login', (req, res, next) => {
  passport.authenticate('local', (err, user, info) => {
    if (err) {
      return next(err)
    }
    if (!user) {
      return res.status(401).send(info)
    }
    req.login(user, (err) => {
      if (err) {
        return next(err)
      }
      return res.status(200).json(user)
    })
  })(req, res, next)
})

router.get('/logout', (req, res) => {
  req.logout()
  res.status(200).send()
})

router.get('/me', checkAuthentication, (req, res) => {
  return res.status(200).json(req.user)
})

function checkAuthentication(req, res, next) {
  if (req.isAuthenticated()) {
    next()
  } else {
    res.status(204).send()
  }
}

export default router

その他サーバーサイド

Passport の初期化

• passport.initialize() ：Passport の初期化
• passport.session() ：ログイン後のセッション管理
• 正しい順番でログインセッションを処理するために passport.session() は express.session() よりも後に記述する

諸々の読み込みと一緒にまとめると、こんな感じ

server/index.js
import express from 'express'
import cookieParser from 'cookie-parser'
import bodyParser from 'body-parser'
import session from 'express-session'
import passport from 'passport'
import { Nuxt, Builder } from 'nuxt'
import api from './api/v1'
import db from './models'

const app = express()

app.use(express.static('public'))
app.use(cookieParser())
app.use(bodyParser.json())
app.use(
  session({ secret: 'your secret keyword' })
)
app.use(passport.initialize())
app.use(passport.session())

// Setup DB
db.sequelize
  .authenticate()
  .then(() => {
    console.log('Connection has been established successfully.')
  })
  .catch(err => {
    console.error('Unable to connect to the database:', err)
  })

// Setup Passport
require('./passport_auth')(passport)

// API Routes
app.use('/api/v1', api)

// Build Nuxt
const config = require('../nuxt.config.js')
const nuxt = new Nuxt(config)
// 開発環境の場合にライブビルドとライブリロードを有効化
if (nuxt.options.dev) {
  new Builder(nuxt).build()
}
app.use(nuxt.render)

Nuxt.js

ストア ( Vuex )

ステート

• loginUserにログインユーザーの情報をいれて行く。
• デフォルトは null

const state = {
  loginUser: null
}

ゲッター

• isAuthenticated()で認証済みかどうかを true/false で返すようにする
• loginUserでログインユーザー情報を返すようにする

const getters = {
  isAuthenticated (state) {
    return !!state.loginUser
  },
  loginUser(state) {
    return state.loginUser
  }
}

ミューテーション

• ログイン時にloginUserにユーザー情報を入れる
• ログアウト時はloginUserにnullを入れる

const mutations = {
  login (state, user) {
    state.loginUser = user
  },
  logout (state) {
    state.loginUser = null
  }
}

アクション と nuxtServerInit

• アクションは、状態を変更するのではなく、ミューテーションをコミットするもの。
• アクションは非同期処理を含むことができる。
• ログイン後、必要なログインユーザーのデータを取得し、ミューテーションをコミットするようにする。
• Nuxtの場合、nuxtServerInit() に任意の処理を追加できる。
• nuxtServerInit() アクションは引数でコンテキストを渡して呼び出されるので、アプリケーションがロードされたときは、サーバーから取得できるデータが既にストアに入っている状態にできるようになる。
• なのでreq.userから、必要なミューテーションをコミットする。

const actions = {
  nuxtServerInit({ commit }, { req }) {
    if (req.user) {
      return commit('login', req.user)
    }
    return commit('logout')
  },
  fetchLogin({ commit }) {
    return new Promise((resolve, reject) => {
      axios
        .get('/me')
        .then(response => {
          if (response.status === 200) {
            commit('login', response.data)
          } else {
            commit('logout')
          }
          resolve()
        })
        .catch(error => {
          reject(error)
        })
    })
  }
}

ストアの処理をまとめると、こんな感じ

store/auth.js
import axios from '~/plugins/axios'

const state = {
  loginUser: null
}

const getters = {
  isAuthenticated (state) {
    return !!state.loginUser
  },
  loginUser(state) {
    return state.loginUser
  }
}

const mutations = {
  login (state, user) {
    state.loginUser = user
  },
  logout (state) {
    state.loginUser = null
  }
}

const actions = {
  nuxtServerInit({ commit }, { req }) {
    if (req.user) {
      return commit('login', req.user)
    }
    return commit('logout')
  },
  fetchLogin({ commit }) {
    return new Promise((resolve, reject) => {
      axios
        .get('/me')
        .then(response => {
          if (response.status === 200) {
            commit('login', response.data)
          } else {
            commit('logout')
          }
          resolve()
        })
        .catch(error => {
          reject(error)
        })
    })
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

認証middleware

• ストアのゲッターで定義したisAuthenticated ()からリダイレクトするかどうかを決めるだけ
• 例えば、ログイン画面などで、ログイン済み場合はトップ画面へリダイレクトさせる処理は以下のようになる

middleware/authenticated.js
export default function ({ store, route, redirect }) {
  if (store.getters.isAuthenticated) {
    return redirect('/')
  }
}

ログイン画面

login.vue
<template>
  <article class="layout-login">
    <section id="login">
      <form @submit.prevent="authenticate">
        <input id="username" name="username" placeholder="Username" type="text" autocomplete="username" v-model="auth.username">
        <input id="password" name="password" placeholder="Password" type="password" autocomplete="current-password" v-model="auth.password">
        <div class="error" v-if="message">{{message}}</div>
        <input id="submit" name="submit" type="submit" value="Login">
      </form>
    </section>
  </article>
</template>

<script>
import axios from '~/plugins/axios'

export default {
  middleware: 'authenticated',  // 認証ミドルウェアを使用
  data () {
    return {
      auth: {
        username: '',
        password: '',
        remember: true
      },
      message: null
    }
  },
  methods: {
    authenticate () {
      axios
        .post('login', this.auth)  // ログインAPIへ入力情報をPOST
        .then(response => {
          this.$store.dispatch('fetchLogin')  // ログインできたらユーザー情報を取得し、ストアに保持する
        })
        .catch(error => {
          if (error.response.status === 401) {
            this.message = error.response.data.message
          }
          console.error(error.message)
        })
    }
  }
}
</script>

これで完成。かと思いきや。。。

• 内部で認証が必要なAPIを、フロントの asyncData() 内で叩く時、そのページへのアクセスが、URL直打ちやページ上のリロード時は以下の理由で認証されない。
• req.user が存在しない。
• req.isAuthenticated() も false なる。

• nuxtServerInit()内で、req.userがいれば、axios のヘッダ情報に リクエストヘッダのクッキー情報 req.headers.cookieを入れる

nuxtServerInit({ commit }, { req }) {
    if (req.user) {
      axios.defaults.headers.common.cookie = req.headers.cookie
      return commit('login', req.user)
    }
    return commit('logout')
  },

余談

• nuxt-community/express-templateでは、上記の処理用の middleware を作成し、nuxt.config.js の router に登録しているが、このやり方だと、ogp が正しく取得できなくなるので要注意。