文档章节

VuePress 中增加用户登录功能

TerryZ
 TerryZ
发布于 11/28 11:06
字数 1100
阅读 718
收藏 3

在 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 生命周期中执行,并将该操作进行全局混入,才能达到全局校验的效果

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

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

实例

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

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

源代码

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

© 著作权归作者所有

TerryZ

TerryZ

粉丝 50
博文 12
码字总数 10867
作品 14
福州
架构师
私信 提问
我的这套VuePress主题你熟悉吧

最近熬了很多个夜晚, 踩坑无数, 终于写出了用VuePress驱动的主题. 只需体验三分钟,你就会跟我一样,爱上这款主题. vuepress-theme-indigo-material, 已经发布到npm, 请客官享用~~ 介绍 vuep...

_肥肥_
02/21
0
0
vuepress和valine搭建带评论的博客

vuepress 搭建 blog 创建工程   创建工程,初始化,添加依赖 创建博客目录   创建博客文件夹,该文件夹适用于编写文档用的,其中的每一个 markdown 文件(.md)都是可以看做一篇博客。当...

johnshere
01/04
0
0
一步步搭建 VuePress 及优化【插件系列】

介绍 在之前为了搭建 VuePress 的文档,顺带制作了视频教程,如今准备再次搭建一个 VuePress 的项目,一看自己的视频竟然有五个小时,天呐,我只是需要过一遍而已,所以重新整理成文档吧,万...

shanyuhai123
04/01
0
0
给你的 VuePress 添加 Gitalk 评论插件吧

最近在用 VuePress 写文档。为了更好地和别人交流,决定加上一个评论插件。考虑到评论插件要和 GitHub issues 整合,最后筛选出 Gitman 和 Gitalk. 因为前者年代久远经久失修,而后者的口碑还...

YanceyOfficial
03/30
0
0
使用VuePress进行《程序员你为什么这么累?》总结整理 - 知乎

最近vue在作者出了新作品VuePress,使用了一下确实很不错,简单易用,全静态带标题搜索!把自己的github主页给整了一下,像模像样的,欢迎大家访问,地址:晓风轻技术小站 程序员你为什么这么...

我的java学习之路及习惯
10/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用zabbix自带的模板监控MySQL自带

一、安装zabbix server 略 二、安装zabbix agent 略 三、给主机套自带的模板 略 四、创建授权用户 mysql> grant all on *.* to 'zabbix'@'localhost' identified by 'musingtec2019';Quer......

雁南飞丶
8分钟前
4
0
notepad++快捷键

notepad++也情有独钟,最近发现了一个快捷键,就是选中单词,ctrl+shift+enter。不过现在想知道一个快捷键,假设有三行代码,选中后一般按TAB就可以三行全部缩进. Notepad++绝对是windows下进...

zhengzhixiang
29分钟前
5
0
区块链背景是什么?区块链的意义是什么?

一、前言 区块链技术的首次也是最著名的应用是比特币,一个在2009年1月初正式上线运行的去中心化数字货币应用,他的创始人叫中本聪,但目前大家并不知道此人的真实身份。 比特币不同于现代国...

daxiongdi
34分钟前
4
0
在Bash中循环浏览文件内容

如何使用Bash遍历文本文件的每一行? 使用此脚本: echo "Start!"for p in (peptides.txt)do echo "${p}"done 我在屏幕上得到以下输出: Start!./runPep.sh: line 3: syntax error......

技术盛宴
37分钟前
8
0
史上最强IP正则表达式

port ([0-9]|[1-9]\\d{1,3}|[1-5]\\d{4}|6[0-4]\\d{4}|65[0-4]\\d{2}|655[0-2]\\d|6553[0-5]) ipv4 ^((25[0-5]|2[0-4]\\d|[01]?\\d\\d?)\\.){3}(25[0-5]|2[0-4]\\d|[01]?\\d\\d?)$ ipv4+mask......

蜗牛伊
40分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部