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

2023-08-05 06:09:04 57

VuePress是什么？

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

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

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

在VuePress中增加用户登录

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

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

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

安装插件

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

#npm
npmiv-dialogs-D

#yarn
yarnadd-Dv-dialogs

创建登录表单

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






.login-form
padding:1rem
displayflex
flex-directioncolumn
box-sizingborder-box
.btn-row
margin-top1rem
.btn
padding0.6rem2rem
outlinenone
background-color#60C084
colorwhite
border0
.form-header
color#666
margin-bottom0.5rem
.form-control
padding0.6rem
border2pxsolid#ddd
width100%
margin-bottom0.5rem
box-sizingborder-box
outlinenone
transitionborder0.2sease
&:focus
border2pxsolid#aaa

VuePress配置

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

import{checkAuth}from'./login/helper'
importLoginfrom'./login/Login'

exportdefault({
Vue,
options,
router,
siteData
})=>{
Vue.mixin({
mounted(){
constdoCheck=()=>{
if(!checkAuth()){
this.$dlg.modal(Login,{
width:300,
height:350,
title:'Employeelogin',
singletonKey:'employee-login',
maxButton:false,
closeButton:false,
callback:data=>{
if(data===true){
//dosomestuffafterlogin
}
}
})
}
}

if(this.$dlg){
doCheck()
}else{
import('v-dialogs').then(resp=>{
Vue.use(resp.default)
this.$nextTick(()=>{
doCheck()
})
})
}
}
})
}

代码中使用了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中如何增加用户登录功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐