![7b704e2cb5d8ef00fefa94c403ba52e3.png](https://i-blog.csdnimg.cn/blog_migrate/0a4ff6ae69cce838f2c73fd1dbb51fe8.jpeg)
VuePress是什么?
先让我们看看VuePress能干什么?有什么效果?
![ec3bd01536d479d1e0c86fa5c34bc634.png](https://i-blog.csdnimg.cn/blog_migrate/aaed6b12da0252b7122c6298d7eeb6e7.jpeg)
很像vue官网的文档页面,因为vuePress就是尤大大的一个力作
vuePress官网介绍介绍的很详细,这里只做搭建VuePress项目教程
在VuePress中增加用户登录
VuePress是Vuejs官方提供的一个快速建设文档站点的工具,在简单配置好功能后,需要做的事情就剩下写好一个个Markdown文档。
因为VuePress提供了可以在Markdown中使用Vue的能力,所以有时候,希望可以在它的文档功能基础上增加部分常规功能,比如用户登录;有团队希望公司建设的文档内容仅公司员工可查看,因为有可能会有涉及内容保密的部分
VuePress本身的安装配置过程不再赘述,可参考官方文档,本文将介绍使用v-dialogs对VuePress增加用户登录功能的进行改造,仅作为抛砖引玉,更多的需求,大家可以自由发挥想象。
安装插件
安装v-dialogs插件,将会使用它的模态窗口(Modal)和消息通知(Alert)的功能
![1498e30daefabb7b38fd535c90a5b4d5.png](https://i-blog.csdnimg.cn/blog_migrate/7ccdf16dee676a9d48e457c7fded0a0f.jpeg)
创建登录表单
新增Login.vue文件用于登录表单,它将使用模态窗口(Modal)进行展示
![e26af6e6d53cb6b91decd1154cdee44b.png](https://i-blog.csdnimg.cn/blog_migrate/ce77c3f449e9df9732389a18df2a73ea.jpeg)
VuePress配置
在/.vuepress位置新增enhanceApp.js文件,该文件是VuePress对应用级别的配置的配置文件,文件exportdefault了一个钩子函数,并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的Vue插件、注册全局组件,或者增加额外的路由钩子等
![00fa9700399096e12a62354ab2e1beb5.png](https://i-blog.csdnimg.cn/blog_migrate/201b43e5c6df69ac0cbde35e03c4a542.jpeg)
代码中使用了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中如何增加用户登录功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小编的支持!