feat: basic authentication (#6)

* chore: authentication api

* chore: basic authentication

* fix: lint and typecheck

* chore: lint

* fix: tsconfig

app/api/auth.ts

@@ -0,0 +1,16 @@
+import { request } from './request'
+import { cookies } from '~/composables/cookies'
+import { forceReloadWindow } from '~/utils'
+
+export async function signIn(username: string, password: string) {
+  return request.post('/auth/login', { username, password })
+}
+
+export async function signOut() {
+  cookies.remove('token')
+  forceReloadWindow()
+}
+
+export function isSignedIn() {
+  return Boolean(cookies.get('token'))
+}

app/composables/cookies.ts

@@ -0,0 +1,2 @@
+import { useCookies } from '@vueuse/integrations/useCookies'
+export const cookies = useCookies(null, { autoUpdateDependencies: true })

app/pages/index.vue

@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import { signOut } from '~/api/auth'
+</script>
+
 <template>
-  <div>hi pages</div>
+  <div>
+    <button @click="signOut">
+      signout
+    </button>
+  </div>
 </template>

app/pages/signin.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { signIn } from '~/api/auth'
+import { forceReloadWindow } from '~/utils'
+
+const form = reactive({
+  username: '',
+  password: '',
+})
+const onSubmit = () => {
+  signIn(form.username, form.password)
+    .then(() => {
+      forceReloadWindow()
+    }).catch((err) => {
+      // eslint-disable-next-line no-alert
+      window.alert(err)
+    })
+}
+</script>
+
+<template>
+  <form action="" @submit.prevent="onSubmit">
+    <input v-model="form.username" type="text">
+    <input v-model="form.password" type="password">
+    <button>SignIn</button>
+  </form>
+</template>

app/router.ts

@@ -1,6 +1,20 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
+import { isSignedIn } from './api/auth'
 import routes from '~pages'
 export const router = createRouter({
   history: createWebHashHistory(),
   routes,
 })
+
+router.beforeEach((to) => {
+  if (isSignedIn()) {
+    if (to.path === '/signin')
+      return '/'
+    else return true
+  }
+  else {
+    if (to.path !== '/signin')
+      return '/signin'
+    return true
+  }
+})

app/utils.ts

@@ -0,0 +1,4 @@
+export const forceReloadWindow = () => {
+  window.onbeforeunload = () => {}
+  window.location.reload()
+}

package.json

@@ -33,12 +33,15 @@
   },
   "homepage": "https://github.com/YuJianghao/imageur#readme",
   "dependencies": {
+    "@vueuse/core": "^8.5.0",
+    "@vueuse/integrations": "^8.5.0",
     "@winwin/koa-authentication": "^0.2.2",
     "axios": "^0.27.2",
     "http-errors": "^2.0.0",
     "koa": "^2.13.4",
     "koa-bodyparser": "^4.3.0",
     "koa-logger": "^3.2.1",
+    "universal-cookie": "^4.0.4",
     "vue": "^3.2.36",
     "vue-router": "^4.0.15"
   },
@@ -51,6 +54,7 @@
     "@types/koa-bodyparser": "^4.3.7",
     "@types/koa-logger": "^3.1.2",
     "@types/koa__router": "^8.0.11",
+    "@types/node": "^17.0.36",
     "@types/rollup-plugin-auto-external": "^2.0.2",
     "@vitejs/plugin-vue": "^2.3.3",
     "concurrently": "^7.2.0",