feat: add login logout logincheck

Author: hisasann

src/common/constants/api.ts

@@ -0,0 +1,12 @@
+import Env from '@/common/env/'
+
+const getBffUrl = (path: string): string => [Env.url, path].join('')
+
+export const API_ENDPOINT = {
+  /** ログイン状態チェック */
+  LOGIN_CHECK: getBffUrl('/login-check'),
+  /** ログイン */
+  LOGIN: getBffUrl('/login'),
+  /** ログアウト */
+  LOGOUT: getBffUrl('/logout')
+}

src/common/constants/index.ts

@@ -6,3 +6,4 @@ console.log('process.env.NODE_ENV: ', process.env.NODE_ENV)
 console.log('RUNTIME_ENV: ', process.env.RUNTIME_ENV)
 
 export * from './pjName'
+export * from './api'

src/interface/User/ILogin.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Login インターフェイス
+ */
+export interface ILoginPayload {
+  username: string
+  password: string
+}
+
+export interface IUser {
+  loggedIn: boolean
+}

src/interface/User/ILoginCheck.d.ts

@@ -0,0 +1,10 @@
+/**
+ * LoginCheck インターフェイス
+ */
+export interface ILoginCheckPayload {
+  token: string
+}
+
+export interface ILoginCheck {
+  loggedIn: boolean
+}

src/interface/User/ILogout.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Logout インターフェイス
+ */
+export interface ILogoutPayload {
+  token: string
+}
+
+export interface ILogout {
+  loggedIn: boolean
+}

src/store/auth.ts

@@ -1,24 +1,52 @@
 import Vue from 'vue'
+import { AxiosRequestConfig } from 'axios'
+import { ILoginPayload, IUser } from '@/interface/User/ILogin'
+import { ILoginCheckPayload, ILoginCheck } from '@/interface/User/ILoginCheck'
+import { ILogoutPayload, ILogout } from '@/interface/User/ILogout'
+import { setToken, unsetToken, cancelToken } from '@/utilities/'
 
 /**
  * store 用インターフェイス
  */
-export interface StateInterface {
+export interface IState {
+  /**
+   * ユーザー情報
+   */
+  authUser: IUser | null
+  /**
+   * ログイン中かどうか
+   */
   loggedIn: boolean
+  /**
+   * ローディング
+   */
+  busy: {
+    register: boolean
+    login: boolean
+    loginCheck: boolean
+    logout: boolean
+  }
 }
 
 /**
  * state
  */
-export const state = (): StateInterface => ({
-  loggedIn: false
+export const state = (): IState => ({
+  authUser: null,
+  loggedIn: false,
+  busy: {
+    register: false,
+    login: false,
+    loginCheck: false,
+    logout: false
+  }
 })
 
 /**
  * getters
  */
 export const getters = {
-  isAuthenticated(state: StateInterface) {
+  isAuthenticated(state: IState): boolean {
     return !!state.loggedIn
   }
 }
@@ -27,11 +55,28 @@ export const getters = {
  * mutations
  */
 export const mutations = {
+  /**
+   * ユーザー情報を更新する
+   */
+  SET_USER: function(state: IState, user: IUser): void {
+    state.authUser = user
+  },
   /**
    * ログイン状態を更新する
    */
-  updateLoginStatus(state: StateInterface, status: boolean): void {
+  updateLoginStatus(state: IState, status: boolean): void {
     state.loggedIn = status
+  },
+  /**
+   * 処理中ステータスを更新する
+   */
+  updateBusyStatus(
+    state: IState,
+    payload: [keyof IState['busy'], boolean]
+  ): void {
+    const [key, status] = payload
+
+    Vue.set(state.busy, key, status)
   }
 }
 
@@ -49,17 +94,49 @@ export const actions = {
     this: Vue,
     // @ts-ignore
     { state, commit }: any,
-    token: string
-  ): Promise<void> {
-    console.log('login:', token === 'hisasann')
+    payload: ILoginPayload
+  ): Promise<IUser | void> {
+    console.log('login payload:', payload)
+
+    // ログイン中、またはすでにログイン済みなら処理を抜ける
+    if (state.busy.login || state.loggedIn) {
+      return
+    }
+
+    // TODO: payload の validation はここかな
+
+    commit('updateBusyStatus', ['login', true])
 
     try {
-      // TODO サーバーにログイン
+      const {
+        data,
+        headers,
+        status,
+        statusText,
+        config
+      } = await this.$axios.post<IUser>(
+        this.$C.API_ENDPOINT.LOGIN,
+        {
+          username: payload.username,
+          password: payload.password
+        },
+        {
+          cancelToken: cancelToken.getToken(payload)
+        } as AxiosRequestConfig
+      )
+
+      setToken(headers['access-token'])
 
-      // 値をストアに保存
-      await commit('updateLoginStatus', token === 'hisasann')
+      // ログイン状態を更新
+      commit('updateLoginStatus', data.loggedIn)
+      // ユーザー情報をストアに保存
+      commit('SET_USER', data)
+
+      return data
     } catch (err) {
-      console.log(err)
+      throw new Error(err)
+    } finally {
+      commit('updateBusyStatus', ['login', false])
     }
   },
 
@@ -71,17 +148,43 @@ export const actions = {
   async logout(
     this: Vue,
     // @ts-ignore
-    { state, commit }: any
-  ): Promise<void> {
+    { state, commit }: any,
+    payload: ILogoutPayload
+  ): Promise<ILogout | void> {
     console.log('logout')
 
+    // 処理中、未ログインなら中断
+    if (state.busy.logout) {
+      return
+    }
+
+    commit('updateBusyStatus', ['logout', true])
+
     try {
-      // TODO サーバーからログアウト
+      const token: string = payload.token
+      const {
+        data,
+        headers,
+        status,
+        statusText,
+        config
+      } = await this.$axios.post<ILogout>(this.$C.API_ENDPOINT.LOGOUT, {}, {
+        headers: {
+          'access-token': token
+        },
+        cancelToken: cancelToken.getToken(payload)
+      } as AxiosRequestConfig)
+
+      unsetToken()
 
-      // 値をストアに保存
-      await commit('updateLoginStatus', false)
+      // ログイン状態を更新
+      commit('updateLoginStatus', data.loggedIn)
+
+      return data
     } catch (err) {
-      console.log(err)
+      throw new Error(err)
+    } finally {
+      commit('updateBusyStatus', ['logout', false])
     }
   },
 
@@ -95,17 +198,46 @@ export const actions = {
     this: Vue,
     // @ts-ignore
     { state, commit }: any,
-    token: string
-  ): Promise<void> {
-    console.log('loginCheck:', token === 'hisasann')
+    payload: ILoginCheckPayload
+  ): Promise<ILoginCheck | void> {
+    console.log('loginCheck', payload)
+
+    commit('updateBusyStatus', ['loginCheck', true])
 
     try {
-      // TODO ログインチェックとは？
+      const postHeaders = {}
+      const token: string | undefined = payload.token
+      if (token) {
+        postHeaders['access-token'] = token
+      }
+
+      const {
+        data,
+        headers,
+        status,
+        statusText,
+        config
+      } = await this.$axios.post<ILoginCheck>(
+        this.$C.API_ENDPOINT.LOGIN_CHECK,
+        {},
+        {
+          headers: postHeaders,
+          cancelToken: cancelToken.getToken(payload)
+        } as AxiosRequestConfig
+      )
+
+      if (headers['access-token'] && data.loggedIn) {
+        setToken(headers['access-token'])
+      }
+
+      // ログイン状態を更新
+      commit('updateLoginStatus', data.loggedIn)
 
-      // 値をストアに保存
-      await commit('updateLoginStatus', token === 'hisasann')
+      return data
     } catch (err) {
-      console.log(err)
+      throw new Error(err)
+    } finally {
+      commit('updateBusyStatus', ['loginCheck', false])
     }
   }
 }

src/store/index.ts

@@ -1,4 +1,6 @@
 import { ActionContext } from 'vuex'
+import { ILoginCheckPayload } from '@/interface/User/ILoginCheck'
+import { getTokenFromCookie } from '@/utilities/'
 
 /**
  * store 用インターフェイス
@@ -45,7 +47,9 @@ export const mutations = {
  * actions
  */
 export const actions = {
-  /** サーバー初期化時の処理 */
+  /**
+   * サーバー初期化時の処理
+   */
   async nuxtServerInit(
     // @ts-ignore
     { dispatch, commit, state }: ActionContext<any, any>,
@@ -54,8 +58,16 @@ export const actions = {
   ): Promise<void> {
     await console.log('nuxtServerInit')
     commit('setIsServerInitCalled')
+
+    const token = getTokenFromCookie(req)
+
+    await dispatch('auth/loginCheck', {
+      token
+    } as ILoginCheckPayload)
   },
-  /** クライアント初期化時の処理 */
+  /**
+   * クライアント初期化時の処理
+   */
   // @ts-ignore
   nuxtClientInit({ commit }: ActionContext<any, any>, { app }): void {
     console.log('nuxtClientInit')

src/utilities/auth.ts

@@ -10,7 +10,7 @@ export const unsetToken = (): void => {
 }
 
 // @ts-ignore
-export const getTokenFromCookie = (req: any): string | undefined => {
+export const getTokenFromCookie = (req?: any): string | undefined => {
   // SSR
   if (req && req.headers.cookie) {
     console.log('req.headers.cookie:', req.headers.cookie)
@@ -19,7 +19,7 @@ export const getTokenFromCookie = (req: any): string | undefined => {
       .find((c: string) => c.trim().startsWith('token='))
 
     if (!cookie) {
-      return ''
+      return undefined
     }
 
     const token = cookie.split('=')[1]