VuePress 中增加用户登录功能

　　在 VuePress 中增加用户登录
　　
　　VuePress 是 Vuejs 官方提供的一个快速建设文档站点的工具，在简单配置好功能后，需要做的事情就剩下写好一个个 Markdown 文档。
　　
　　因为 VuePress 提供了可以在 Markdown 中使用 Vue 的能力，所以有时候，希望可以在它的文档功能基础上增加部分常规功能，比如用户登录；有团队希望公司建设的文档内容仅公司员工可查看，因为有可能会有涉及内容保密的部分
　　
　　VuePress 本身的安装配置过程不再赘述，可参考官方文档，本文将介绍使用 v-dialogs 对 VuePress 增加用户登录功能的进行改造，仅作为抛砖引玉，更多的需求，大家可以自由发挥想象。
　　
　　安装插件
　　
　　安装 v-dialogs 插件，将会使用它的模态窗口 （Modal） 和消息通知 （Alert） 的功能
　　
　　# npm
　　
　　npm i v-dialogs -D
　　
　　# yarn
　　
　　yarn add -D v-dialogs
　　
　　创建登录表单
　　
　　新增 Login.vue 文件用于登录表单，它将使用模态窗口（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 = (www.lannxinzc.cn) => {
　　
　　if (!checkAuth( www.tongyayule.com)) {
　　
　　this.$dlg.modal(Login, {
　　
　　width: 300,
　　
　　height: 350,
　　
　　title: www.mingheyl178.com'Employee login',
　　
　　singletonKey: 'employee-login',
　　
　　maxButton: false,
　　
　　closeButton: false,
　　
　　callback: data => {
　　
　　if (data =www.jintianxuesha.com== true)www.longtenghai2.com {
　　
　　// do some stuff after login
　　
　　代码中使用了 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 生命周期中执行，并将该操作进行全局混入，才能达到全局校验的效果
　　
　　上述的代码编写部署并重新构建后，就会在每个文档页面中执行用户身份校验
　　
　　未登录，则弹出模态窗口要求输入身份信息进行校验
　　
　　已登录时就显示正确的文档内容
　　
　　实例
　　
　　可以访问下面的站点进行在线预览登录功能的改造