Nuxt.jsでログインをどうやるか、そしてCookieからlocalStorageへ

export default ({ $axios, app, req, error }): void => {
  /**
   * $axios.onRequest
   */
  $axios.onRequest(
    (config: AxiosRequestConfig): void => {
      const token = getTokenFromCookie(req)

      // トークンがあればログイン済みなのでリクエストヘッダで送信する
      if (token) {
        config.headers[app.$C.ACCESS_TOKEN_NAME] = token
      }
    }
  )

  /**
   * $axios.onResponse
   */
  $axios.onResponse(
    (response): void => {
      const token = response.headers[app.$C.ACCESS_TOKEN_NAME]

      // CSR のときだけトークンをセットする、 SSR のときは nuxtClientInit でセットしている
      if (process.client) {
        if (token) {
          setToken(token)
        } else {
          unsetToken()
        }
      }
    }
  )
}

export const actions = {
  /**
   * サーバー初期化時の処理
   */
  async nuxtServerInit(
    { dispatch, commit, state }: ActionContext<any, any>,
    { req, res, error }
  ): Promise<void> {
    await console.log('nuxtServerInit')
    commit('setIsServerInitCalled')

    // ログインチェック
    await dispatch('auth/loginCheck', {} as ILoginCheckPayload)
  },
  /**
   * クライアント初期化時の処理
   */
  nuxtClientInit({ commit, getters }: ActionContext<any, any>, { app }): void {
    console.log('nuxtClientInit')
    commit('setIsClientInitCalled')

    // nuxtServerInit でログインチェックした state を元に token を cookie にセットし直す
    const token = getters['auth/getToken']
    const loggedIn = getters['auth/isAuthenticated']
    console.log('token', getters['auth/getToken'], 'loggedIn:', loggedIn)
    if (token && loggedIn) {
      setToken(token)
    } else {
      unsetToken()
    }
  }
}

import { ILoginCheckPayload } from '@/interfaces/api/User/ILoginCheck'

export default async function({ store, redirect }): Promise<void> {
  console.log('authenticated')

  await store.dispatch('auth/loginCheck', {} as ILoginCheckPayload)

  if (!store.getters['auth/isAuthenticated']) {
    await redirect('/example/auth/sign-in')
  }
}

import { Component, Vue } from 'nuxt-property-decorator'

@Component({
  middleware: 'authenticated'
})

const config: NuxtConfiguration = {
  router: {
    // リロードのタイミングでは SSR 側で実行される
    // ルーティングの度に CSR 側で実行される
    // ログインの必要のない画面でも middleware が実行されるので注意が必要
    middleware: ['check-auth']
  }
}

@Component({
  middleware: 'authenticated'
})

const config: NuxtConfiguration = {
  plugins: [
    { src: '@/plugins/auth/auth-plugin.client.ts', mode: 'client' }
  ]
}

import { sleep } from '@/utilities/'

export default async ({
  $axios,
  app,
  route,
  router,
  store,
  req,
  error
}): Promise<void> => {
  console.log('auth-plugin')
  await sleep(5000)
  console.log('auth-plugin2')
}

export const actions = {
  /**
   * クライアント初期化時の処理
   */
  // @ts-ignore
  async nuxtClientInit(
    { dispatch, commit, getters }: ActionContext<any, any>,
    { app }
  ): Promise<void> {
    console.log('nuxtClientInit')
    commit('setIsClientInitCalled')

    // ログインチェック
    await dispatch('auth/loginCheck', {
      data: {} as ILoginCheckPayload
    })
  }
}

  public async created() {
    // ログインチェック
    // dispatch した return 値を受け取っているところがミソ
    const data = await this.$store.dispatch('auth/loginCheck', {
      data: {} as ILoginCheckPayload
    })

    if (!data.loginFlg) {
      const { fullPath } = this.$route
      // リダイレクト
      this.$router.replace(this.$C.PAGE.LOGIN + '?from=' + fullPath)
    }
  }

import { Component, Watch, Vue } from 'nuxt-property-decorator'

export default class Page extends Vue {
  /** computed */
  public get isAuthenticated(): INotice[] {
    return this.$store.getters['auth/isAuthenticated']
  }

  /**
   * ログインチェック
   * { immediate: true } でメソッドを一度即座に実行している
   * これは、CSR で遷移してきた場合は this.$store.getters['auth/isAuthenticated'] の変化がないため Watch が fire されないため
   */
  @Watch('isAuthenticated', { immediate: true })
  onIsAuthenticated(val: string, oldVal: string) {
    console.log('onIsAuthenticated', val, oldVal)
  }
}