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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 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
PHP学习资料汇总与网址
2007/03/16 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
Python continue语句用法实例
2014/03/11 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
Python遍历numpy数组的实例
2018/04/04 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
python采集微信公众号文章
2018/12/20 Python
python交互界面的退出方法
2019/02/16 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
小学生开学第一课活动方案
2014/03/27 职场文书
社区服务活动总结
2014/05/07 职场文书
访谈节目策划方案
2014/05/15 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
如何正确理解python装饰器
2021/06/15 Python