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


Posted in Javascript onNovember 29, 2019

VuePress是什么?

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

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

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

vuePress官网介绍介绍的很详细,这里只做搭建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 生命周期中执行,并将该操作进行全局混入,才能达到全局校验的效果

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

  • 未登录,则弹出模态窗口要求输入身份信息进行校验
  • 已登录时就显示正确的文档内容

实例

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

github.io

gitee.io

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

源代码

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

总结

以上所述是小编给大家介绍的VuePress 中如何增加用户登录功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript的对话框详解与参数
Mar 08 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
webpack的pitching loader详解
Sep 23 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 #Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 #Javascript
Vue基础配置讲解
Nov 29 #Javascript
jQuery实现弹幕特效
Nov 29 #jQuery
Vue实现多标签选择器
Nov 28 #Javascript
swiper实现异形轮播效果
Nov 28 #Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 #Javascript
You might like
第三节 定义一个类 [3]
2006/10/09 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
jQuery实现简单飞机大战
2020/07/05 jQuery
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
python django生成迁移文件的实例
2019/08/31 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
Flask处理Web表单的实现方法
2021/01/31 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
总经理助理岗位职责
2013/11/08 职场文书
学党史心得体会
2014/09/05 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python