VuePress 中如何增加用户登录功能

VuePress是什么？

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

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

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

在VuePress中增加用户登录

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

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

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

安装插件

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

创建登录表单

新增Login.vue文件用于登录表单，它将使用模态窗口（Modal）进行展示

VuePress配置

在/.vuepress位置新增enhanceApp.js文件，该文件是VuePress对应用级别的配置的配置文件，文件exportdefault了一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的Vue插件、注册全局组件，或者增加额外的路由钩子等

代码中使用了Vue.mixin对全局进行了混入操作，所以在每个文档页面被访问后都会触发该mounted()生命周期进行用户权限的校验。在这里需要特别说明的是，原来对于权限检查的操作，本是希望在VueRouter的路由守卫中处理，但由于浏览器的API访问限制原因，Vue插件在注册的过程中因为需要使用到浏览器的API（window或document），但在编译为静态文件的过程中，需要通过Node.js服务端渲染，因此所有的Vue相关代码都应当遵循编写通用代码的要求。简而言之，请确保只在beforeMount或者mounted访问浏览器/DOM的API

v-dialogs在注册的过程中需要使用到document这个对象，所以在编译的过程中会出现documentisnotdefined的错误信息，基于上述的原因，对于功能权限的检查在mounted生命周期中执行，并将该操作进行全局混入，才能达到全局校验的效果

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

实例

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

github.io

gitee.io

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

源代码

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

总结

以上所述是小编给大家介绍的VuePress中如何增加用户登录功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小编的支持！