VuePress 中增加用户登录功能
在 VuePress 中增加用户登录
VuePress 是 Vuejs 官方提供的一个快速建设文档站点的工具,在简单配置好功能后,需要做的事情就剩下写好一个个 Markdown 文档。
因为 VuePress 提供了可以在 Markdown 中使用 Vue 的能力,所以有时候,希望可以在它的文档功能基础上增加部分常规功能,比如用户登录;有团队希望公司建设的文档内容仅公司员工可查看,因为有可能会有涉及内容保密的部分
VuePress 本身的安装配置过程不再赘述,可参考官方文档,本文将介绍使用 v-dialogs 对 VuePress 增加用户登录功能的进行改造,仅作为抛砖引玉,更多的需求,大家可以自由发挥想象。
安装插件
安装 v-dialogs
插件,将会使用它的模态窗口 (Modal) 和消息通知 (Alert) 的功能
# npm npm i v-dialogs -D # yarn yarn 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
生命周期中执行,并将该操作进行全局混入,才能达到全局校验的效果
上述的代码编写部署并重新构建后,就会在每个文档页面中执行用户身份校验
- 未登录,则弹出模态窗口要求输入身份信息进行校验
- 已登录时就显示正确的文档内容
实例
可以访问下面的站点进行在线预览登录功能的改造
输入任意用户名和密码进行体验即可
源代码
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Three.js - 走进3D的奇妙世界
摘要:本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。 文章来源:宜信技术学院 & 宜信支付结算团队技术分享第6期-支付结算部支付研发团队前端研发高级工程师-刘琳《three.js - 走进3D的奇妙世界》 分享者:宜信支付结算部支付研发团队前端研发高级工程师-刘琳 原文首发于支付结算团队公号-“野指针” 随着人们对用户体验越来越重视,Web开发已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库,它的出现让3D应用开发更简单,本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。 一、Three.js相关概念 1.1 Three.JS Three.JS是基于WebGL的Javascript开源框架,简言之,就是能够实现3D效果的JS库。 1.2 WebGL WebGL是一种Javascript的3D图形接口,把JavaScript和OpenGL ES 2.0结合在一起。 1.3 OpenGL OpenGL是开放式图形标准,跨编程语言、跨平台,Javascript、Java 、C、C++ 、...
- 下一篇
OneinStack 2.2 发布,一键 PHP/JAVA 安装工具
OneinStack 2.2 发布了,这个脚本是使用 shell编写,为了快速在生产环境上部署lnmp/lamp/lnmpa/lnmt(Linux、Nginx/Tengine/OpenResty、 MySQL/MariaDB/Percona/MongoDB/PostgreSQL、PHP、Apache、Tomcat),适用于CentOS 6~8(包括redhat)、Debian 6~10、Ubuntu 14~19的32位和64位。 OneinStack包含以下组合: lnmp(Linux + Nginx+ MySQL/MongoDB+ PHP) lamp(Linux + Apache+ MySQL/MongoDB+ PHP) lnmpa(Linux + Nginx+ MySQL/MongoDB+ PHP+ Apache):Nginx处理静态,Apache(mod_php)处理动态PHP lnmt(Linux + Nginx+ MySQL/MongoDB+ Tomcat):Nginx处理静态,Tomcat(JDK)处理JAVA lnpp(Linux + Nginx+ PostgreSQL+...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- MySQL8.0.19开启GTID主从同步CentOS8
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- CentOS7设置SWAP分区,小内存服务器的救世主