VuePress 中增長用戶登陸功能

時間 2019-12-08

標籤 vuepress 增長用戶登陸功能简体版

原文原文鏈接

在 VuePress 中增長用戶登陸

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

由於 VuePress 提供了能夠在 Markdown 中使用 Vue 的能力，因此有時候，但願能夠在它的文檔功能基礎上增長部分常規功能，好比用戶登陸；有團隊但願公司建設的文檔內容僅公司員工可查看，由於有可能會有涉及內容保密的部分vue

VuePress 自己的安裝配置過程再也不贅述，可參考官方文檔，本文將介紹使用 v-dialogs 對 VuePress 增長用戶登陸功能的進行改造，僅做爲拋磚引玉，更多的需求，你們能夠自由發揮想象。git

安裝插件

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

# npm
npm i v-dialogs -D

# yarn
yarn add -D v-dialogs

建立登陸表單

新增 Login.vue 文件用於登陸表單，它將使用模態窗口（Modal）進行展現npm

<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 插件、註冊全局組件，或者增長額外的路由鉤子等api

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 對全局進行了混入操做，因此在每一個文檔頁面被訪問後都會觸發該 mounted() 生命週期進行用戶權限的校驗。在這裏須要特別說明的是，原來對於權限檢查的操做，本是但願在 Vue Router 的路由守衛中處理，但因爲瀏覽器的 API 訪問限制緣由，Vue 插件在註冊的過程當中由於須要使用到瀏覽器的API （window 或 document），但在編譯爲靜態文件的過程當中，須要經過 Node.js 服務端渲染，所以全部的 Vue 相關代碼都應當遵循編寫通用代碼的要求。簡而言之，請確保只在 beforeMount 或者 mounted 訪問瀏覽器 / DOM 的 API瀏覽器

v-dialogs 在註冊的過程當中須要使用到 document 這個對象，因此在編譯的過程當中會出現 document is not defined 的錯誤信息，基於上述的緣由，對於功能權限的檢查在 mounted 生命週期中執行，並將該操做進行全局混入，才能達到全局校驗的效果ide

上述的代碼編寫部署並從新構建後，就會在每一個文檔頁面中執行用戶身份校驗函數