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调用WebService的示例
Apr 07 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
Angularjs中使用轮播图指令swiper
May 30 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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 中的一些经验积累
2006/10/09 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
Python 串口读写的实现方法
2019/06/12 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Python实现密码薄文件读写操作
2019/12/16 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
大学生未来职业生涯规划书
2014/02/15 职场文书
白酒市场营销方案
2014/02/25 职场文书
合作协议书模板
2014/10/10 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android