VuePress是什么？

先让我们看看 VuePress能干什么？有什么效果？

很像vue官网的文档页面，因为vuePress就是尤大大的一个力作

vuePress官网介绍介绍的很详细，这里只做搭建VuePress项目教程

在 VuePress 中增加用户登录

VuePress 是 Vuejs 官方提供的一个快速建设文档站点的工具，在简单配置好功能后，需要做的事情就剩下写好一个个 Markdown 文档。

因为 VuePress 提供了可以在 Markdown 中使用 Vue 的能力，所以有时候，希望可以在它的文档功能基础上增加部分常规功能，比如用户登录；有团队希望公司建设的文档内容仅公司员工可查看，因为有可能会有涉及内容保密的部分

VuePress 本身的安装配置过程不再赘述，可参考官方文档，本文将介绍使用v-dialogs 对 VuePress 增加用户登录功能的进行改造，仅作为抛砖引玉，更多的需求，大家可以自由发挥想象。

安装插件

安装v-dialogs 插件，将会使用它的模态窗口 （Modal） 和消息通知 （Alert） 的功能

# npmnpm i v-dialogs -D# yarnyarn 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 = () => { 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 生命周期中执行，并将该操作进行全局混入，才能达到全局校验的效果

上述的代码编写部署并重新构建后，就会在每个文档页面中执行用户身份校验

• 未登录，则弹出模态窗口要求输入身份信息进行校验
• 已登录时就显示正确的文档内容

实例

可以访问下面的站点进行在线预览登录功能的改造

github.io

gitee.io

输入任意用户名和密码进行体验即可

源代码

请访问：https://github.com/TerryZ/vuepress-login

总结

以上所述是小编给大家介绍的VuePress 中如何增加用户登录功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！