feat: add logincheck to middleware/authenticated.ts

Author: hisasann

src/middleware/anonymous.ts

@@ -1,4 +1,9 @@
-export default async function({ store, redirect }: any): Promise<void> {
+/**
+ * すでにログインしていたらトップにリダイレクトするミドルウェア
+ * @param store
+ * @param redirect
+ */
+export default async function({ store, redirect }): Promise<void> {
   console.log('anonymous')
   if (store.getters['auth/isAuthenticated']) {
     await redirect('/example')

src/middleware/authenticated.ts

@@ -1,5 +1,20 @@
-export default async function({ store, redirect }: any): Promise<void> {
+/**
+ * ログインしていなかったらログイン画面にリダイレクトするミドルウェア
+ * @param store
+ * @param redirect
+ */
+
+import { getTokenFromCookie } from '@/utilities/'
+import { ILoginCheckPayload, ILoginCheck } from '@/interface/User/ILoginCheck'
+
+export default async function({ store, redirect }): Promise<void> {
   console.log('authenticated')
+
+  const token = getTokenFromCookie()
+  await store.dispatch('auth/loginCheck', {
+    token
+  } as ILoginCheckPayload)
+
   if (!store.getters['auth/isAuthenticated']) {
     await redirect('/example/auth/sign-in')
   }

src/pages/example/auth/sign-in.vue

@@ -1,34 +1,44 @@
 <template lang="pug">
-  section
-    h1.title
-      | sign-in {{counter}} seconds
+  .login-form
+    form(@submit.prevent='login')
+      p.error(v-if='error') {{ error }}
+      p
+        input(type='text' v-model='username' placeholder='username' name='username')
+      p
+        input(type='text' v-model='password' placeholder='password' name='password')
+      .login-btn
+        button(type='submit') ログイン
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
-import { sleep } from '@/utilities/'
+import { ILoginPayload, IUser } from '@/interface/User/ILogin'
 
 @Component({
   middleware: 'anonymous'
 })
 export default class SignIn extends Vue {
-  public counter: number = 3
-
-  public async mounted() {
-    await sleep(1000)
-    this.counter = 2
-    await sleep(1000)
-    this.counter = 1
-    await sleep(1000)
-    this.counter = 0
-
-    await this.$router.replace('/example/auth/signed-in?user=hisasann')
-  }
+  public username: string = ''
+  public password: string = ''
+  public error: string | null = null
 
   public head() {
     return {
       title: 'sign-in'
     }
   }
+
+  public async login() {
+    try {
+      const res: IUser = await this.$store.dispatch('auth/login', {
+        username: this.username,
+        password: this.password
+      } as ILoginPayload)
+
+      this.$router.push('/example')
+    } catch (e) {
+      this.error = e.message
+    }
+  }
 }
 </script>

src/pages/example/auth/sign-off.vue

@@ -5,13 +5,18 @@
 
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
-import { unsetToken } from '@/utilities/auth'
+import { getTokenFromCookie } from '@/utilities/'
+import { ILogoutPayload } from '@/interface/User/ILogout'
 
-@Component
+@Component({
+  middleware: 'authenticated'
+})
 export default class SignOff extends Vue {
   public async mounted() {
-    unsetToken()
-    await this.$store.dispatch('auth/logout')
+    await this.$store.dispatch('auth/logout', {
+      token: getTokenFromCookie()
+    } as ILogoutPayload)
+
     this.$router.replace('/example')
   }