VuePress 中如何增加用戶登錄功能

更新時間：2019年11月29日 09:29:33 作者：TerryZeng

VuePress 由兩部分組成：一個以 Vue 驅動的主題系統(tǒng)的簡約靜態(tài)網站生成工具，和一個為編寫技術文檔而優(yōu)化的默認主題。它是為了支持 Vue 子項目的文檔需求而創(chuàng)建的

VuePress是什么？

先讓我們看看 VuePress能干什么？有什么效果？

很像vue官網的文檔頁面，因為vuePress就是尤大大的一個力作

vuePress官網介紹介紹的很詳細，這里只做搭建VuePress項目教程

在 VuePress 中增加用戶登錄

VuePress 是 Vuejs 官方提供的一個快速建設文檔站點的工具，在簡單配置好功能后，需要做的事情就剩下寫好一個個 Markdown 文檔。

因為 VuePress 提供了可以在 Markdown 中使用 Vue 的能力，所以有時候，希望可以在它的文檔功能基礎上增加部分常規(guī)功能，比如用戶登錄；有團隊希望公司建設的文檔內容僅公司員工可查看，因為有可能會有涉及內容保密的部分

VuePress 本身的安裝配置過程不再贅述，可參考官方文檔，本文將介紹使用 v-dialogs 對 VuePress 增加用戶登錄功能的進行改造，僅作為拋磚引玉，更多的需求，大家可以自由發(fā)揮想象。

安裝插件

安裝 v-dialogs 插件，將會使用它的模態(tài)窗口（Modal）和消息通知（Alert）的功能

# npm
npm i v-dialogs -D

# yarn
yarn add -D v-dialogs

創(chuàng)建登錄表單

新增 Login.vue 文件用于登錄表單，它將使用模態(tài)窗口（Modal）進行展示

<template>
 <div class="login-form">
  <div class="form-header">User Name</div>
  <div>
   <input type="text" class="form-control" v-model="username">
  </div>
  <div class="form-header">Password</div>
  <div>
   <input type="password" class="form-control" v-model="password">
  </div>

  <div class="btn-row">
   <button class="btn" @click="login">
    OK
   </button>
  </div>
 </div>
</template>

<script>
import { STORAGE_KEY } from './helper'

export default {
 data () {
  return {
   username: '',
   password: ''
  }
 },
 methods: {
  login () {
   if (this.username && this.password) {
    const data = JSON.stringify({
     name: this.username,
     time: new Date().getTime()
    })
    // 登錄成功后的邏輯處理，這里將數據保存在 localStorage 中僅作為功能演示
    window.localStorage.setItem(STORAGE_KEY, data)
    // 關閉窗口
    this.$emit('close', true)
   } else {
    this.$dlg.alert('Please complete the content', {
     messageType: 'warning'
    })
   }
  }
 }
}
</script>

<style lang="stylus">
.login-form
 padding: 1rem
 display flex
 flex-direction column
 box-sizing border-box
 .btn-row
  margin-top 1rem
 .btn
  padding 0.6rem 2rem
  outline none
  background-color #60C084
  color white
  border 0
 .form-header
  color #666
  margin-bottom 0.5rem
 .form-control
  padding 0.6rem
  border 2px solid #ddd
  width 100%
  margin-bottom 0.5rem
  box-sizing border-box
  outline none
  transition border 0.2s ease
  &:focus
   border 2px solid #aaa
</style>

VuePress 配置

在 /.vuepress 位置新增 enhanceApp.js 文件，該文件是 VuePress 對應用級別的配置的配置文件，文件 export default 了一個鉤子函數，并接受一個包含了一些應用級別屬性的對象作為參數。你可以使用這個鉤子來安裝一些附加的 Vue 插件、注冊全局組件，或者增加額外的路由鉤子等

import { checkAuth } from './login/helper'
import Login from './login/Login'

export default ({
 Vue,
 options,
 router,
 siteData
}) => {
 Vue.mixin({
  mounted() {
   const doCheck = () => {
    if (!checkAuth()) {
     this.$dlg.modal(Login, {
      width: 300,
      height: 350,
      title: 'Employee login',
      singletonKey: 'employee-login',
      maxButton: false,
      closeButton: false,
      callback: data => {
       if (data === true) {
        // do some stuff after login
       }
      }
     })
    }
   }

   if (this.$dlg) {
    doCheck()
   } else {
    import('v-dialogs').then(resp => {
     Vue.use(resp.default)
     this.$nextTick(() => {
      doCheck()
     })
    })
   }
  }
 })
}

代碼中使用了 Vue.mixin 對全局進行了混入操作，所以在每個文檔頁面被訪問后都會觸發(fā)該 mounted() 生命周期進行用戶權限的校驗。在這里需要特別說明的是，原來對于權限檢查的操作，本是希望在 Vue Router 的路由守衛(wèi)中處理，但由于瀏覽器的 API 訪問限制原因，Vue 插件在注冊的過程中因為需要使用到瀏覽器的API （window 或 document），但在編譯為靜態(tài)文件的過程中，需要通過 Node.js 服務端渲染，因此所有的 Vue 相關代碼都應當遵循編寫通用代碼的要求。簡而言之，請確保只在 beforeMount 或者 mounted 訪問瀏覽器 / DOM 的 API

v-dialogs 在注冊的過程中需要使用到 document 這個對象，所以在編譯的過程中會出現(xiàn) document is not defined 的錯誤信息，基于上述的原因，對于功能權限的檢查在 mounted 生命周期中執(zhí)行，并將該操作進行全局混入，才能達到全局校驗的效果

上述的代碼編寫部署并重新構建后，就會在每個文檔頁面中執(zhí)行用戶身份校驗