您的位置:首页 > Web前端 > Vue.js

VuePress 中增加用户登录功能

2019-11-28 12:04 2071 查看

在 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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Vue.js VuePress v-dialogs