如何监测系统用户是否登录_VuePress 中如何增加用户登录功能

如何监测系统用户是否登录_VuePress 中如何增加用户登录功能_第1张图片

VuePress是什么?

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

如何监测系统用户是否登录_VuePress 中如何增加用户登录功能_第2张图片

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

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

在VuePress中增加用户登录

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

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

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

安装插件

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

如何监测系统用户是否登录_VuePress 中如何增加用户登录功能_第3张图片

创建登录表单

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

如何监测系统用户是否登录_VuePress 中如何增加用户登录功能_第4张图片

VuePress配置

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

如何监测系统用户是否登录_VuePress 中如何增加用户登录功能_第5张图片

代码中使用了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中如何增加用户登录功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小编的支持!

你可能感兴趣的:(如何监测系统用户是否登录,如何获取当前登录的用户名称?)