diff --git a/package.json b/package.json
index 2983806..5d95604 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "start": "vue-live dev",
     "build": "vue-live build"
   },
-  "dependencies": {
+  "devDependencies": {
     "@bytedo/vue-live": "^0.0.13"
   }
 }
diff --git a/src/lib/fetch.js b/src/lib/fetch.js
new file mode 100644
index 0000000..61419d3
--- /dev/null
+++ b/src/lib/fetch.js
@@ -0,0 +1,11 @@
+import fetch from 'fetch'
+
+fetch.BASE_URL = '//api.jscdn.ink'
+
+fetch.inject.request(function (conf) {
+  conf.headers['content-type'] = 'application/json'
+})
+
+fetch.inject.response(r => r.json())
+
+export default fetch
diff --git a/src/router.js b/src/router.js
index 7a351f6..5583cfe 100644
--- a/src/router.js
+++ b/src/router.js
@@ -18,6 +18,11 @@ const router = createRouter({
       path: '/request',
       name: 'request',
       component: () => import('./views/request.vue')
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('./views/login.vue')
     }
   ]
 })
diff --git a/src/views/login.vue b/src/views/login.vue
new file mode 100644
index 0000000..346922c
--- /dev/null
+++ b/src/views/login.vue
@@ -0,0 +1,78 @@
+<template>
+  <main class="login-page">
+    <div class="login-form">
+      <section class="title">请使用以下方式登录</section>
+      <a class="github" @click="jumpLogin()">
+        <svg class="ico" viewBox="0 0 16 16" width="32" height="32" fill="currentColor">
+          <path
+            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 01-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 010 8c0-4.42 3.58-8 8-8z"
+          />
+        </svg>
+      </a>
+    </div>
+  </main>
+</template>
+
+<script>
+import fetch from '@/lib/fetch'
+
+export default {
+  data() {
+    return {
+      content: ''
+    }
+  },
+  mounted() {
+    this.$store.searchShow = false
+
+    // console.log(this.$route)
+
+    if (this.$route.query.code) {
+      fetch('/login/github', {
+        method: 'post',
+        body: {
+          code: this.$route.query.code
+        }
+      }).then(r => {
+        console.log(r)
+      })
+    }
+  },
+
+  methods: {
+    jumpLogin(site = 'github') {
+      switch (site) {
+        case 'github':
+          location.href =
+            'https://github.com/login/oauth/authorize?' +
+            `client_id=57d9d247bda6302fd9d1&redirect_uri=https://www.jscdn.ink/login`
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.login-page {
+  display: flex;
+  justify-content: center;
+  width: 1024px;
+  margin: 0 auto;
+  padding: 16px;
+
+  .login-form {
+    width: 320px;
+    height: 160px;
+    padding: 32px;
+    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
+
+    .title {
+      margin-bottom: 32px;
+      line-height: 2;
+      font-size: 20px;
+      color: var(--color-grey-3);
+    }
+  }
+}
+</style>